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

　　推荐阅读

　　jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法

看到很多网上对含特殊字符 json 数据处理，都是逐个判断是哪个特殊字符，比如回车如何处理，引号如何处理。其实有现成的代码库可以做这件事情，下载 json-lib-2.3-jdk15.jar ： 复制代码 代码如下: import net.sf.>>>详细阅读

本文标题：JavaScript之appendChild、insertBefore和insertAfter使用说明

地址：http://www.17bianji.com/kaifa2/JS/25117.html

 1/2    1