效果浏览:
当我们在文本框里输入想要发布的内容然后单击发布后:
留言会在下方弹出且文本框中内容清空,下面再发布一条留言:
可以看到最新发布的留言是插入在最上方的,下面我要删除第二条留言就单击对应的删除键:
示例代码及注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 200px;
}
ul li {
width: 200px;
background-color: pink;
margin: 10px;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
</body>
<script>
//1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
//2.注册事件
btn.onclick = function() {
if(text.value == '') {
alert('您没有输入内容');
return false;
}
else{
//1.创建元素
var li = document.createElement('li');
//2.添加元素 innerhtml能够识别html标签
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
//保证最新的留言在第一个
ul.insertBefore(li,ul.children[0]);
text.value = '';//将大文本框中已发布的留言删除
//删除元素 删除的是当前链接的父亲
var a = document.querySelectorAll('a');
for(var i = 0;i<a.length;i++) {
a[i].onclick = function() {
//node.removeChild(child) 删除的是li是当前a所在的li
//li 是 this.parengNode
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</html>