【AppendChild】js中AppendChild与insertBefore的用法详细解析-insertBefore

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【js中AppendChild与insertBefore的用法详细解析】，下面是详细的讲解！

js中AppendChild与insertBefore的用法详细解析

appendChild定义
appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口，简单地说就是将元素添加到指定的节点中

appendChild用法
target.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

appendChild例子
var newElement=document.Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');

var usernameText=document.Document.getElementById('username');
usernameText.appendChild(newElement);

insertBefore定义
The insertBefore() method inserts a new child node before an existing child node.

insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点

insertBefore用法
target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数，当为null时其效果与appendChild一样

insertBefore例子
var oTest=document.getElementById("test");
var newNode=document.createElement("p");
newNode.innerHTML="This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]); 

 
好了那么有insertBefore的应该也有insertAfter吧？
好那我们来用Aptana编写一个例子吧，但Aptana的智能提示告诉我其实没有insertAfter这个方法
那么就自己定义一个罗:)

insertAfter定义
function insertAfter(newEl, targetEl)
{
      var parentEl=targetEl.parentNode;

      if(parentEl.lastChild==targetEl)
      {
           parentEl.appendChild(newEl);
      }else
      {
           parentEl.insertBefore(newEl,targetEl.nextSibling);
      }           
}

 
insertAfter用法与例子
var txtName=document.getElementById("txtName");
var htmlSpan=document.createElement("span");
htmlSpan.innerHTML="This is a test";
insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

总结：
1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数

2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。

3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点

关于js中AppendChild与insertBefore的用法详细解析的用户互动如下：

　　相关问题：关于JS中appendChild的用法

　　答：appendChild() 方法是向节点添加最后一个子节点。 例子： CoffeeTea var node=document.createElement("LI"); //创建一个li节点 var textnode=document.createTextNode("Water"); //创建一个文本节点内容 node.appendChild(textnode); //将文本... >>详细

　　相关问题：Javascript有关insertBefore的问题

　　答：标准的javascript不提供insertAfter功能。 可以自己实现： function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode; if(parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); }else { parentEl.insertBefore(... >>详细

　　相关问题：JQuery之append和appendTo的区别，还有js中的appen...

　　答：append 父添加子。 appendTo 子添加到父。 JQuery append 相当于 Js appendChild >>详细