<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>简易留言板</h2>
<input type="text" placeholder="请输入内容" size="30" id="msg">
<input type="button" value="留言" id="btn">
<div id="msg-div"></div>
</body>
<script>
let oBtn=document.getElementById('btn');
let msg=document.getElementById('msg');
let content=document.getElementById('msg-div');
oBtn.onclick=()=>{
let ovalue=msg.value;
let ali=document.createElement('p');
//es6模板字符串
ali.innerHTML=${ovalue}<span>删除</span>;
var aspan = content.getElementsByTagName('p');
if(aspan.length>0){
content.insertBefore(ali,aspan[0]);
}else{
content.appendChild(ali);
}
msg.value='';
var oSpan=content.getElementsByTagName('span');
for(let i=0;i<oSpan.length;i++){
oSpan[i].onclick=function(){
content.removeChild(this.parentNode);
}
}
}
</script>
</html>
网友评论