js 节点用法

 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 节点之后