在网页中，我们经常要利用js动态的改变列表和输入框里的值，比如留言，评论等功能展示
实例
<!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>
<input type="text" >
<ul id="liuyan">
</ul>
<script>
//获取留言的输入框
var comment = document.querySelector('input');
//获取列表
var ul = document.getElementById('liuyan');
//获得焦点
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{
//如果有首先获取第一条留言
var first = ul.firstElementChild;
ul.insertBefore(li,first); //insertBefore 两个参数 第一个是要插入的元素 第二个是插在谁前面
}
comment.value = "";
}
}
function del(hh) {
if(confirm("是否删除？")){
//获取删除的元素
var li = hh.parentNode;
var ul = li.parentNode;
ul.removeChild(li);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例