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

发布时间：2023-08-25 14:40:29 所属栏目：教程来源：

导读：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定义

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!