* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
<body>
<textarea name="" id="text"></textarea>
<button id="btn">发布</button>
<ul>
</ul>
<script>
// 获取文本域元素
var text = document.getElementById(‘text‘)
// 获取发布按钮
var btn = document.getElementById(‘btn‘)
// 获取ul标签
var ul = document.getElementsByTagName(‘ul‘)[0]
// 给发布按钮绑定点击事件
btn.onclick = function () {
// 判断用户输入的内容是否为空 => 获取用户输入的内容
if(text.value == ‘‘){
alert(‘请输入内容再发表 不然头给你打歪‘)
// 停止当前代码往下执行
return false
}
// 创建li标签
var li = document.createElement(‘li‘)
// 添加文本内容
li.innerHTML = text.value
// 将设置好的标签追加到页面的末尾
// ul.appendChild(li)
// 将设置好的标签追加到页面的最前面
ul.insertBefore(li, ul.children[0])
// 清空文本框
text.value = ‘‘
}
</script>
</body>