JavaScript---Node节点方法

Node节点方法

• appendChild() 向节点的子节点列表的结尾追加一个新的子节点

例子

	<style>
        #box{width: 1000px;height:200px;background: #2b669a;}
        img{width: 40px;height: 40px;float: left;margin-right: 10px;}
    </style>
    <script>
        function f() {
            var box = document.getElementById("box");
            var pic = document.getElementById("pic");
            box.appendChild(pic);
        }
    </script>
    <div id="box">
        <img src="img/i1.png">
        <img src="img/i2.jpg">
        <img src="img/i3.jpg">
    </div>
    <img src="img/xing.jpg" id="pic">
    <button onclick="f()">append</button>

运行结果

• cloneChild() 复制节点（参数为真，则复制子元素，如果参数为假的话，就不复制子元素）

例子

这个是只能复制粘贴一个的，css样式同上

<script>
        function f() {
            var box = document.getElementById("box");
            var pic = document.getElementById("pic");
            var img = pic.cloneNode();
            box.appendChild(img);
        }
    </script>
    <div id="box">
        <img src="img/i1.png">
        <img src="img/i2.jpg">
        <img src="img/i3.jpg">
    </div>
    <img src="img/xing.jpg" id="pic">
    <button onclick="f()">clone</button>

运行结果

这个是一次能粘5个，但是限制次数只能粘3次，只有js标签不一样。

<script>
        var j = 0;
        var t = 0;
        function f() {
            if(t<3){
                var box = document.getElementById("box");
                var pic = document.getElementById("pic");
                for(var i = 0; i<3;i++){
                    var img = pic.cloneNode();
                    img.id="pic"+j;
                    box.appendChild(img);
                }
            }
           t++;
        }
    </script>

参数为真，则复制子元素，如果参数为假的话，就不复制子元素，通过下面这个例子就会明白。

	function f() {
          var box = document.getElementById("box");
          var img = document.getElementById("img");
          var index = img.cloneNode(true);
                //cloneChild()里面参数为true，则可以复制子元素，否则不能复制子元素
                box.appendChild(index);
        }
        <div id="box">
        <img src="img/i1.png">
        <img src="img/i2.jpg">
        <img src="img/i3.jpg">
    </div>
    <div id="img" style="background: #2b542c;width: 50px;height: 50px;">
        <img src="img/i1.png" id="pic">
    </div>

    <button onclick="f()">复制</button>

参数不为true时运行结果为：下图，就是把盒子粘贴过去但是盒子里面的图片没有粘贴过去。

参数为true时，运行结果如下图，就说盒子同里面的图片一起都被粘贴了。

• insertBefore() 在指定的子节点之前插入新的子节点

例子

	<script>
        function f() {
             var box = document.getElementById("box");
             var pic = document.getElementById("pic");
             var img = document.getElementsByTagName("img");
             box.insertBefore(pic,img[1]);
        }
    </script>
    <div id="box">
        <img src="img/i1.png">
        <img src="img/i2.jpg">
        <img src="img/i3.jpg">
    </div>
    <img src="img/xing.jpg" id="pic">
    <button onclick="f()">insert</button>

运行结果

• replaceChild() 用一个新的子节点替换指定的子节点

例子

	 <script>
        function f() {
            var box = document.getElementById("box");
            var pic = document.getElementById("pic");
            var img = document.getElementsByTagName("img");
            box.replaceChild(pic,img[1]);
        }
    </script>
    <div id="box">
        <img src="img/i1.png">
        <img src="img/i2.jpg">
        <img src="img/i3.jpg">
    </div>
    <img src="img/xing.jpg" id="pic">
    <button onclick="f()">replace</button>

运行结果

• removeChild() 删除并返回当前节点的指定子节点

例子

	<script>
        function f() {
            var box = document.getElementById("box");
            var img = document.getElementsByTagName("img");
            box.removeChild(img[2]);
        }
    </script>
    <div id="box">
        <img src="img/i1.png">
        <img src="img/i2.jpg">
        <img src="img/i3.jpg">
        <img src="img/xing.jpg">
    </div>
    <button onclick="f()">remove</button>

运行结果

• document.createElement() 创建节点

例子

	<style>
        #box{width: 1000px;height:200px;background: #2b669a;}
    </style>
    <script>
        function f() {
            var box = document.getElementById("box");
            var div  = document.createElement("div");
            div.style.width=100+"px";
            div.style.height=100+"px";
            div.style.background="yellow";
            box.appendChild(div);
        }
    </script>
    <div id="box"></div>
    <button onclick="f()">create</button>

运行结果