下面将展示我的代码及效果图
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<div>
<label for="comment">请留言:</label>
<input type="text" id="comment" onkeydown="addComment(this)" autofocus>
<ul id="list" >
</ul>
</div>
<script>
function addComment(comment) {
if (event.keyCode===13) {
// var list=comment.value;
// list+=' <button>删除</button>';
// var item = document.createElement('li');
// item.innerHTML=list;
var item=document.createElement('li');
item.innerHTML=comment.value;
item.innerHTML+=' <button onclick="del1(this)">删除</button>';
var list=document.querySelector('#list');
if(list.childElementCount===0){
list.append(item);
}else{
var first=list.firstElementChild;
list.prepend(item,first);
}
comment.value='';
}
}
function del1(ele){
if(confirm('是否删除？')){
var li=ele.parentNode;
li.parentNode.removeChild(li);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上面运用了常用过的JS操作
2.本次学到了获取文本框数据 添加留言功能
如何将获取的文本内容 填写到下方及删除留言功能
先获取文本框内容 点击事件onclick 添加元素createElement
填充到下方ul中
删除时间利用comfirm来判断用户是否真的删除
