实例
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>ToList留言板功能</title>
</head>
<body>
<h3>留言板</h3>
<input type = "text" id = "comment">
<ul></ul>
<script>
//事件是指 用户 或 浏览器 执行的某种动作，比如click、load
//事件处理程序是指 相应某个事件的函数，比如onclick、onload，它们以on开头
// 获取留言区的元素节点
var comment = document.getElementById('comment');
var ul = document.querySelector('ul');
//为留言区设置自动获取焦点事件
comment.focus();
//留言区 -- 按下键盘时触发的事件（如果按住不放，会重复触发）
comment.onkeydown = function (event) { //event指事件对象
//回车的键码=13 event.key === 'Enter'
if (event.keyCode === 13 && comment.value !== '') {
var li = document.createElement('li');
// this指元素对象 -- 这里是a标签元素
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)"> 删除</a>';
//如果是第一条留言
if (ul.childElementCount === 0) {
ul.appendChild(li);
} else { //插入第一条的前面
var first = ul.firstElementChild;
ul.insertBefore(li, first);
}
//清空上一条内容
comment.value = '';
}
}
//删除ele的父节点li
function del(ele) {
if (confirm('确定删除该留言吗？')) { //alert -- 警示，confirm -- 确定，prompt -- 输入信息
var li = ele.parentNode;
li.parentNode.removeChild(li); //参数Node是必须的，指要删除的节点
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
