<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.仿照微博.html</title>
</head>
<body>
<textarea>
</textarea>
<button>发表评论</button>
<ul>
<!-- <li>123</li> -->
</ul>
</body>
<script>
//1.获取对象
var textarea = document.querySelector(‘textarea‘);
var btn = document.querySelector(‘button‘);
var ul = document.querySelector(‘ul‘);
//2.‘点击按钮‘，就将‘用户输入的信息‘‘写入到ul列表中‘。(3个小步骤)
//点击事件
btn.onclick = function(){
//(1)获取用户输入的信息
var value = textarea.value;
//(1-1)创建li节点
var li = document.createElement(‘li‘);
li.innerHTML = value;
//console.log(li);
//(1-4)创建a标签(删除)
var a = document.createElement(‘a‘);
a.href="javascript:;";
a.innerHTML = "删除";
//(1-5)li追加一个a标签
li.appendChild(a);
//(1-2)获取ul的第一个节点
var firstNode = ul.firstElementChild || ul.firstChild;
console.log(firstNode);
//(1-3)在第一个前添加
ul.insertBefore(li,firstNode)
//(2)写入到ul列表中
//var str = ‘<li>‘+value+‘</li>‘;
//ul.innerHTML += str;
//3.点击新创建的a链接，删除当前的li标签
a.onclick = function(){
//找li节点 —— 通过a节点找li父节点
var li = this.parentNode;
//console.log(li);
//删除子节点
//ul.removeChild(li节点);
ul.removeChild(li);
}
}
// 注：ul.firstElementChild 这个查找第一个标签没有的话是一个文本标签 ul.firstChild 这个查找第一个标签没有的话是一个null
// 所以在第一个添加的时候，insertBefore会将文本标签和null当做第一个标签
</script>
</html>
原文：http://www.cnblogs.com/guobaoyuan/p/7821831.html