实例
<!DOCTYPE html>
<html lang="en">
<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>经典的ToList</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){
//生成li
var li = document.createElement('li');
//在li标签中添加内容
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);
}
//在ul节点下添加li
//ul.appendChild(li);
comment.value = '';//清空留言区
}
}
function del(ele){
if(confirm('是否删除？')){
//获取要删除的元素
var li = ele.parentNode;
//删除一定要找到被删除元素的父节点上，在它上面调用删除方法
li.parentNode.removeChild(li);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
体会：通过ToList可以制作一个常见的及时聊天框！