效果如下:
代码思路:
1. 添加部分
点击按钮就创建一个li,然后把li添加到ul里面
在创建li的时候要把文本域里面的值通过li.innerHTML赋值��lis
如果想要新的留言显示到最后面就用appendChild
如果想要显示最前面就用insetBefore
2.删除部分
当我们把文本域里面的值赋值给li的时候,多添加一个删除的连接
需要把所有的连接获取过来,当我们点击当前链接时,删除当前链接所在的li
阻止链接跳转需要添加javascript:void(0);或者javascript:;
html部分:
<div class="box">
<textarea placeholder="请输入您的留言"></textarea>
<button type="button">确认发布</button>
<ol>
</ol>
</div>
css部分:
* {
margin: 0;
padding: 0;
}
.box {
width: 158px;
margin: 40px auto;
text-align: center;
}
textarea {
display: block;
height: 100px;
margin: 0 auto;
}
button {
margin: 10px auto;
}
/* //添加到最后面不用去掉ol的样式 */
ol {
list-style: none;
}
li {
margin: 10px auto;
height: 20px;
background-color: pink;
}
li a {
text-decoration: none;
float: right;
}
javascript部分:
//获取元素
var btn = doc = document.querySelector("button")
var text = doc = document.querySelector("textarea")
var ol = doc = document.querySelector("ol")
btn.onclick = function () {
if (text.value == "") {
alert("请输入您的留言");
return false;
} else {
//创建元素
var li = document.createElement("li")
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
//添加元素
//添加到最后面
ol.appendChild(li)
//添加到最前面
// ol.insertBefore(li,ol.children[0])
//删除元素 删除当前链接的li
var as = document.querySelectorAll("a");
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// node.removeChild(child)
// 删除的是li 当前a所在的li this.parentNode
ol.removeChild(this.parentNode);
}
}
}
}
CSDN话题挑战赛第1期
活动详情地址:CSDN