欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【JavaScript之appendChild、insertBefore和insertAfter使用说明】，下面是详细的讲解！
JavaScript之appendChild、insertBefore和insertAfter使用说明
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来插入新的节点前提是，其兄弟节点必须有共同的父节点
关于JavaScript之appendChild、insertBefore和insertAfter使用说明的用户互动如下：
相关问题：Javascript有关insertBefore的问题
答：标准的javascript不提供insertAfter功能。 可以自己实现： function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode; if(parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); }else { parentEl.insertBefore(... >>详细
相关问题：Jquery中的append跟prepend，after和before的区别
答：一、after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去； 如：A.after(B)的意思是将B放到A后面去； before()——其方法是将方法里面的参数添加到jquery对象前面去。 如：A.before(B)的意思是将A放到B前面去；... >>详细
相关问题：利用javascript在tbody中自动添加行
答：我是很清楚你的代码要做什么，你代码中有几错错误： 1：i、s、n、p都没有定义 2：你只定义了一个var td，这个只有最后一个add会追加。 下面是我根据你的代码调整你，你看看吧。 我觉得你这样的代码没有什么实际的意义，你要这么实现实在不是好办... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-