实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="liuyan">请留言：</label>
<input type="text" id="liuyan" onkeydown="addliuyan(this)" autofocus >
<ul id="list"></ul>
<script>
function addliuyan(liuyan) {
console.log(event.keyCode);
if(event.keyCode === 13) { //回车
var item = document.createElement("li"); //创建li标签
item.innerText = liuyan.value; //item 内容获取
item.innerHTML += '<button onclick="del(this)">删除</button> ';
var list = document.querySelector("#list");//获取ul标签
if (list.childElementCount === 0){ //子节点数量
list.appendChild(item); //添加列表项
}else {
var first = list.firstElementChild; // 获取第一个节点
list.insertBefore(item, first); //itme 插入第一个节点之前
};
}
}
function del(ele) {
if (confirm('是否删除:')){
var li =ele.parentNode; //获取按钮复建点
li.parentNode.removeChild(li); //获取li节点的父节点删除li
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
