实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
</head>
<body>
<div>
<!--网页内容-->
<label for="command">对话框：</label>
<input type="text" id="command" onkeydown="text1(this)" autofocus >
</div>
<div>
<ul id="list"></ul>
</div>
<!--javascript-->
<script>
function text1(command) {
if(event.keyCode===13){
/* 1、创建一个li*/
var items=document.createElement('p');
/*2、把值追加给标签<p> */
// **在li中间插入input文本框里面的内容，command:input的ID, id.value就是文本框里面的内容。
// items.append(command.value);
// **在li中间插入input文本框里面的内容 + 一个删除按钮，command:input的ID, id.value就是文本框里面的内容。
items.innerHTML=command.value + ' <button onclick="del(this)" >删除</button>';
/*3、获取ul的位置, */
// id=list 前面加上#代表的其实就是ID，ID用CSS表示就是#list。
var list=document.querySelector('#list');
//把input文本传追加给 div
//如果list内容数字===0，就直接追加
if(list.childElementCount===0){
list.append(items);
}
//不等于0，就在前边追加。
else{
var first=list.firstElementChild; //
//以下两个效果相同
list.insertBefore(items,first);
// list.prepend(items,first);
}
//4、清空文本
command.value = '';
}
}
//删除按钮
function del(ele) {
if (confirm('是否删除?'))
//移除按钮父节点<li>的元素
ele.parentElement.remove(); //parent 父 Element元素
else
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例