简易留言板

this.value获取表单控件值
this.onchange监控输入内容是否变化
this.appendChild()为标签添加子标签
this.getElementsByTagName()通过标签名获取所有标签，this.length统计长度，[0]取第一个元素
this.insertBefore()，在一个元素之前插入新元素
this.parentNode获取父节点
this.removeChild()移除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
</head>
<body>
    <h4>YY留言板</h4>
    <div id="box">
    </div>
    <textarea id="msg"></textarea>
    <input type="button" id="btn" value="留言">
    <button type="button" onclick="count()">统计留言数</button>
</body>
<script type="text/javascript">
    var ul=document.createElement("ul");
    var box=document.getElementById("box");
    box.appendChild(ul);
    var counts=0;
    var btn=document.getElementById('btn');
    var msg=document.getElementById('msg')
    btn.onclick=function (ev) {
        var content=msg.value;
        var li=document.createElement('li')

        li.innerHTML=content+"<span>&nbsp;&nbsp;&nbsp;X</span>";

        var lis=document.getElementsByTagName("li");
        if(lis.length==0){
            ul.appendChild(li);
            counts++;
        }else {
            ul.insertBefore(li,lis[0]);
            counts++;
        }
        msg.value="";
        //添加li标签后动态给设置onclick属性

        var spans=document.getElementsByTagName("span");
        for(i=0;i<spans.length;i++){
            spans[i].onclick=function () {
                ul.removeChild(this.parentNode);
                counts--;
            }
        }
    };

    function count() {
        alert("一共发布了"+counts+"条留言");
    };
</script>
</html>

View Code

相关阅读:
开启JAVA学习之旅 Day1
python二分法及小tips
简单的注入脚本
Requests文档阅读笔记
多线程
IO操作
异常Exception
Map集合
Collection集合
泛型

原文地址：https://www.cnblogs.com/yaya625202/p/9189734.html