3-DOM操作节点-insertBefore+replaceChild+removeChild

最新推荐文章于 2019-03-20 16:36:00 发布

娶个村姑当大妾

最新推荐文章于 2019-03-20 16:36:00 发布

阅读量425

点赞数

分类专栏： DOM（文档对象模型）

本文链接：https://blog.csdn.net/Bug_money/article/details/53148828

版权

DOM（文档对象模型）专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>操作节点-insertBefore+replaceChild+removeChild</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid #ccc
        }
        #one{
            background-color:#F00;
        }
        #two{
            background-color: #0F0;
        }
        #three{
            background-color:#00F;
        }
        div#content{
            width: 100%;
            height: auto;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="content">
        <div id="one">one</div>
        <div id="two">two</div>
        <div id="three">three</div>
    </div>
    <button id="addBtn">追加</button>
    <button>插入</button>

    <script type="text/javascript">
        var content = document.getElementById("content");
        var one = document.getElementById("one");
         content.appendChild(one);
        /*
            var one = document.getElementById("one");
            content.appendChild(one);     one追加到three后面  一个节点在一个文档树中只能出现一次

            insertBefore()
                第一个参数：要插入的节点；
                第二个参数：作为参照的节点；
                被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面
            replaceChild()
                第一个参数：要插入的节点；
                第二个参数：要替换的节点；
                要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。
            removeChild() 
                一个参数，即要移除的节点。
                移除的节点将作为方法的返回值。
        */
        /*
            var one = document.getElementById("one");
            content.appendChild(one);     one追加到three后面  一个节点在一个文档树中只能出现一次
        */

        //触发事件+追加
        // 放外面
        var one = document.getElementById("one");
            //content.appendChild(one); 
             //触发事件+克隆追加
        var oneClone = one.cloneNode(true);
            //cloneNode(); 中传递两个参数 true为深复制 不加true为浅复制 不复制里面的内容  

        var addBtn = document.getElementById("addBtn");
        addBtn.onclick = function(){
            content.appendChild(oneClone);
        }
        //element.事件属性 = 事件处理程序（匿名函数）

    </script>
</body>
</html>