总结：
1、querySelector，getElementsByTagName来获取元素；
2、当onkeydown 时触发function（event）事件；
3、keyCode=13为回车值是，createElement 创建一个元素为li元素，并innerHTML输入当前输入文本内容（comment.value）；
4、 ul.childElementCount===0 如果统计ul下面li为0时，ul.appendChild(li);在ul下面添加一个li元素，否则，ul.insertBefore(li,ul.firstElementChild);数据插入到ul下面第一个li元素
5、删除数据在写入数据添加javascript:; 当点击删除时，触发事件onclick
6、var li=ele.parentNode; ele代表当前<a>，parentNode是获取父节点，当前的父节点就<li></li>;
7、li.parentNode.removeChild(li); 删除父节点；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>留言板</h3>
<input type="text">
<ul></ul>
<script>
var comment=document.querySelector('input');
var ul = document.getElementsByTagName('ul')[0]
comment.focus;
comment.onkeydown=function(event){
if(event.keyCode===13){
var li=document.createElement("li");
li.innerHTML = comment.value+"<a href='javascript:;' onclick='del(this)'>删除</a>";
if(ul.childElementCount===0){
ul.appendChild(li);
}else{
ul.insertBefore(li,ul.firstElementChild);
}
comment.value="";
}
}
function del(ele){
if(confirm('是否删除？')){
var li=ele.parentNode;
li.parentNode.removeChild(li);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例