需要达到的效果:
思路:在上面的textarea中输入内容之后,点击按钮之后通过textarea.value获取到内容然后删掉里面的内容,再创建一个li元素,把获取到的内容给li,然后通过insertBefore追加到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=device-width, initial-scale=1.0">
<title>简单版发布留言案例</title>
<style>
textarea {
border: 1px solid pink;
/* 禁止用户拖动 */
resize: none;
/* 按下边框消除 */
outline: none;
}
ul li {
background-color: pink;
width: 300px;
padding: 5px;
color: violet;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
<li>123</li>
</ul>
<script>
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
console.log(ul.children[0].text);
var content = '';
btn.onclick = function() {
// 获取textarea中的文字
content = text.value;
text.value = '';
// 创建一个新的li元素
var li = document.createElement('li');
li.innerHTML = content;
// 在ul的第一个li之前追加元素
ul.insertBefore(li, ul.children[0]);
}
</script>
</body>
</html>