主要利用节点元素ul.insertBefore(li, ul.children[0])来实现
判断文本域是否为空 不为空,创建li,li获取input的value值,插入ul第一个孩子前(确保最新评论在前面),为空弹窗提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=initial-scale=1.0">
<title>Document</title>
<style>
input {
width: 300px;
height: 100px;
background-color: aqua;
}
ul {
background-color: aqua;
}
</style>
</head>
<body>
<input type="textArea">
<button>发布</button>
<ul></ul>
<script>
var input = document.querySelector('input')
var but = document.querySelector('button')
var ul = document.querySelector('ul')
but.onclick = function() {
if (input.value == '') {
alert('请输入内容')
return false
} else {
var li = document.createElement('li');
li.innerHTML = input.value
ul.insertBefore(li, ul.children[0])
}
}
</script>
</body>
</html>