$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点
这三个方法都可以添加选择器,给出选择条件,就能找到你指定的兄弟节点了。
纯手打,望采纳!
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来插入新的节点前提是,其兄弟节点必须有共同的父节点
12
3
4
5
6
7
function insertEle() {
var oTest = document.getElementById("box-one")
var newNode = document.createElement("div")
var reforeNode = document.getElementById("p1")
newNode.innerHTML = " This is a newcon "
oTest.insertBefore(newNode,reforeNode.nextSibling)//新建的元素节点插入id为P1节点元素的后面。
}
第二种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 自定义函数向后插入
function insertAfter( newElement, targetElement)
{
var parent = targetElement.parentNode
if ( parent.lastChild == targetElement )
{
// 如果最后的节点是目标元素,则直接添加。因为默认是最后
parent.a( newElement )
}
else
{
//如果不是,则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
parent.insertBefore( newElement, targetElement.nextSibling )
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)