ES6语法简单留言板

作者: smallBear | 来源:发表于2018-08-15 16:27 被阅读0次

<!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>