<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
p{
width: 300px;
background: red;
overflow-wrap:break-word ;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
margin-top: 10px;
}
ul {
margin-top: 50px;
list-style-type: demical;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<p>你是如何看待中国人吃米饭，西方人吃面食的？</p>
<textarea name="" id=""></textarea>
<button>评论</button>
<ul>
</ul>
<script>
var txt=document.querySelector('textarea');
var btn=document.querySelector('button')
var ul=document.querySelector('ul')
btn.onclick=function(){
if(txt.value==''){
alert('您输入的内容为空，请输入内容发布比较好一些哦')//输入内容为空就不发布
}
else{
var li=document.createElement('li')//写在上相当于全局变量当按钮点击的时候只会生成一个lli，在下面的时候可以每一次点击一次button就会生成一个li
// ul.appendChild(li);//这个是加在后面的
ul.insertBefore(li,ul.children[0])//这个可以让最新添加的继续放在最前面可以让其他人看见
li.innerHTML=txt.value
txt.value=""
}
}
</script>
</body>
</html>
09-20
1750
1750
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
