摘要：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<h3>请留言</h3>
<input type="text">
<ul></ul>
</body>
</html>
<script>
var comment = document.querySelector('input'); //获取input的结点
var ul = document.getElementsByTagName('ul')[0]; //获取ul的结点
comment.focus();
comment.onkeydown = function (event) {
if (event.keyCode === 13) {
var li = document.createElement('li'); //生成新的li结点
li.innerHTML = comment.value + "<a href='javascript:;' onclick='del(this)'>删除</a>";
//执行一段空白的javascript语句，返回空或者false值，从而防止链接跳转。跟当前a标签无关，这段代码始终都会执行。
//如果按的是回车
//Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
if (ul.childElementCount === 0) {
ul.appendChild(li);
} else {
var first = ul.firstElementChild; //ul下第一个子元素的结点
ul.insertBefore(li, first);
}
comment.value = "";
commemt.focus(); // comment.value = "";//清空input中的值
}
}
function del(eve) {
if (confirm('是否删除？')) {
// 获取要删除的元素
var li = eve.parentNode; //获取父结点
//一定要在被删除元素的父结点上调用
li.parentNode.removeChild(li);
}
return false;
}
</script>
批改老师：天蓬老师批改时间：2019-05-27 13:13:06
老师总结：异步执行, 可以从根本 上防止页面阻塞行为的发生, 是一个巨大的进步, 也是单线程编程语言抗衡多线程的唯一利器
