JSappendChild（）和insertBefore（）⽅法：插⼊新节点
在⽂档中有两种办法插⼊新节点，⼀种是在开头插⼊，⼀种是在末尾插⼊。
appendChild()⽅法：在开头插⼊新节点
JavaScript appendChild() ⽅法可向当前节点的⼦节点列表的末尾添加新的⼦节点。⽤法如下：
1 appendChild(newchild)
参数 newchild 表⽰新添加的节点对象，并返回新增的节点。
⽰例1
下⾯⽰例展⽰了如何把段落⽂本增加到⽂档中的指定的 div 元素中，使它成为当前节点的最后⼀个⼦节点。
1 <div id="box"></div>
2 <script>
3var p = ateElement("p");  //创建段落节点
4var txt = ateTextNode("盒模型");  //创建⽂本节点，⽂本内容为“盒模型”
5    p.appendChild(txt);  //把⽂本节点增加到段落节点中
6    ElementById("box").appendChild(p);  //获取box元素，把段落节点增加尽量
7 </script>
如果⽂档树中已经存在参数节点，则将从⽂档树中删除，然后重新插⼊新的位置。如果添加的节点是 DocumentFragment 节点，则不会直接插⼊，⽽是把它的⼦节点插⼊当前节点的末尾。
将元素添加到⽂档树中，浏览器会⽴即呈现该元素。此后，对这个元素所作的任何修改都会实时反映在浏览器中。
⽰例2
在下⾯⽰例中，新建两个盒⼦和⼀个按钮，使⽤ CSS 设计两个盒⼦显⽰为不同的效果；然后为按钮绑定事件处理程序，设计当点击按钮时执⾏插⼊操作。
1 <div id="red">
2    <h1>红盒⼦</h1>
3 </div>
4 <div id="blue">蓝盒⼦</div>
5 <button id="ok">移动</button>
6 <script>
7var ok = ElementById("ok");  //获取按钮元素的引⽤
8    ok.onclick = function () {  //为按钮注册⼀个⿏标单击事件的处理函数
9var red = ElementById("red");  //获取红⾊盒⼦的引⽤
10var blue= ElementById("blue");  //获取蓝⾊盒⼦的引⽤
11        blue.appendChild(red);  //最后移动红⾊盒⼦到蓝⾊盒⼦中
12    }
13 </script>
上⾯代码使⽤ appendChild() ⽅法把红盒⼦移动到蓝⾊盒⼦中间。在移动指定节点时，会同时移动指定节点包含的所有⼦节点，演⽰效果如图所⽰。
insertBefore()⽅法：在末尾插⼊新节点
JavaScript insertBefore() ⽅法可向当前节点的⼦节点列表的开头添加新的⼦节点。⽤法如下：
1 insertBefore(newchild, refchild)
其中参数 newchild 表⽰新插⼊的节点，refchild 表⽰插⼊新节点的节点，⽤于指定插⼊节点的后⾯相邻位置。插⼊成功后，该⽅法将返回新插⼊的⼦节点。
⽰例3
针对⽰例 2 ，如果把蓝盒⼦移动到红盒⼦所包含的标题元素的前⾯，使⽤ appendChild() ⽅法是⽆法实现的，此时可以使⽤ insertBefore()⽅法来实现。
1var ok = ElementById("ok");  //获取按钮元素的引⽤
lick = function () {  //为按钮注册⼀个⿏标单击事件处理函数
3var red = ElementById("red");  //获取红⾊盒⼦的引⽤
js获取子元素4var blue = ElementById("blue");  //获取蓝⾊盒⼦的引⽤
5var h1 = ElementsByTagName("h1")[0];  //获取标题元素的引⽤
6 red.insertBefore(blue, h1);  //把蓝⾊盒⼦移动到红⾊盒⼦内，且位于标题前⾯
7 }
当单击“移动”按钮之后，蓝⾊盒⼦被移动到红⾊盒⼦内部，且位于标题元素前⾯。演⽰效果如下：
insertBefore() ⽅法与 appendChild() ⽅法⼀样，可以把指定元素及其所包含的所有⼦节点都⼀起插⼊到指定位置中。同时会先删除移动的元素，再重新插⼊到新的位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。