2018-11-09

鼠标点击次数的用法

  • n.innerHTML:向n中插入文本内容
  • childnodes:找到该元素中所有的子节点
  • length : 统计元素中的子节点的个数
  • createElement:创建新的节点
  • removechild:删除子节点
  • appendchild:在节点的末尾插入新的节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var times = 0 ;
            function mycheck () {
                times++; //统计鼠标点击的次数;
                var parent = document.getElementById("demo");//找到div区域;
                var x = document.createElement("p");//创建新的段落p,并将它取变量值为x
                var n = times + 1; //鼠标每点击一次,次数相加;
                x.innerHTML = "这是第"+n+"个段落";// 在x中插入文本内容;
                parent.appendChild(x);//在div中,最后一个子节点中添加一个新的节点;
            }
            function youcheck () {
                var q = document.getElementById("demo");//找到div区域中的内容并取值为q;
                var w = q.childNodes;//找到div区域中所有的子节点;
                var e = w.length;//统计子节点的个数;
                var t = w[e-1];//表示最后一个子节点,系统默认从0开始,所以最后一个子节点是个数减1;
                q.removeChild(t);//删除最后一个子节点
            }
        </script>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <div id="demo">
            <p>创建一个新的节点</p>
        </div>
        <input type="button" name="demo2" id="demo2" value="添加子节点" onclick="mycheck()" />
        <input type="button" name="demo3" id="demo3" value="删除子节点" onclick="youcheck()" />
    </body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,704评论 0 7
  • 解压序列赋值多个变量 如果变量个数和序列元素的个数不匹配,会产生一个异常。可以使用任意变量名去占位,到时候丢掉这些...
    Farewell_lpf阅读 209评论 0 0
  • 欢迎关注个人微信公众账号:byodian个人博客:Byodian's Blog JavaScript 基础知识总结...
    工具速递阅读 773评论 0 3
  • summons n.召唤;[法]传唤,传票 v.召唤;传唤( summon 的第三人称单数);传讯(出庭) I o...
    土管207阅读 267评论 0 0
  • 5 月25日《自动营销》 【day74盈盈】 在六子的导读下,我并没有按照正常的顺序读接下来的第二章,而是抓书中重...
    苏小盈阅读 109评论 0 0