JavaScript之appendChild、insertBefore和insertAfter
这几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对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来插入新的节点前提是,其兄弟节点必须有共同的父节点
分享到:
相关推荐
几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结
js中AppendChild与insertBefore的用法详细解析.docx
本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下,希望对大家有所帮助
语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同。 appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。 insertBefore 方法 是在已有的...
obj = document.createElement(tag)创建一个标签,oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用,appendChild将创建的元素依次加在后面,而insertBefore则可以将...
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
本文实例讲述了javascript insertAfter()定义与用法。分享给大家供大家参考,具体如下: HTML部分: <div id=b>bbbbbbbbb <div>dddddd JavaScript部分: [removed]=function(){ var a =document.createElement...
Javascript dom操作中有appendChild 和insertBefore 却没有prependChild 和insertAfter
appendChild()常用功能。 平时我们用appendChild的时候,都是向父级上添加子元素 appendChild的另一个功能是,先把元素从原有父级上删掉,然后添加元素到新的父级。(移除再添加)。 代码说明 <!DOCTYPE ...
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<...– //使用appendChild()方法添加span标签 function AppendD
appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore(newnode, existingnode) 在已有子节点之前插入新的子节点。 removeChild(node) 删除元素的某个指定的子节点,并以 Node 对象返回被...