实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板案例</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
background-color:#9DFFFF;
margin: 0px auto;
}
li{
list-style: none;
}
</style>
</head>
<body>
<h1>留言板</h1>
<input type="text">
<ul></ul>
<script>
var comment=document.getElementsByTagName('input')[0];
var ul=document.getElementsByTagName('ul')[0];
comment.focus();
comment.onkeydown=function(keyCode_event){
if(event.keyCode === 13){
// 生成li标签
var li=document.createElement('li');
// 给li标签添加comment的内容，并且加上点击能调用del函数的a标签
li.innerHTML=comment.value+'<a href="Javascript:;" onclick="del(this)">删除</a>';
// 判断ul标签内部是否有内容
if(ul.childElementCount === 0){
// 如果没有，则把li标签添加到ul里
ul.appendChild(li);
}
// 如果有，则插入到第一个子元素之前
else{
// 先定义ul的第一个子元素
var first=ul.firstElementChild;
// 插入li标签到的第一个子元素之前
ul.insertBefore(li,first);
}
//清空输入框
comment.value='';
}
}
// 删除功能的函数,ele仅为占位参数，无实际意义
function del(ele){
// 弹出返回true与false值的confirm弹窗
if(confirm('是否删除该留言')){
// 当返回值为true时执行
// 寻找a标签的父级元素li标签
var li=ele.parentNode;
// 在li标签的父级元素上执行删除功能
li.parentNode.removeChild(li);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
