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

复制代码 代码如下:

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来插入新的节点前提是,其兄弟节点必须有共同的父节点

 

 

http://www.bkjia.com/Javascript/1237975.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1237975.htmlTechArticlejs中AppendChild与insertBefore的用法详细解析
这篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍,需要的朋友可以过来参考…

//DOM没有提供insertAfter()方法
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素,则直接添加。因为默认是最后
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
//如果不是,则插入在目标元素的下一个兄弟节点
的前面。也就是目标元素的后面
}
}

相关文章