这几天需要用到对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来插入新的节点前提是,其兄弟节点必须有共同的父节点
转载请注明出处[http://samlin.cnblogs.com/
]
分享到:
相关推荐
几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结
21、原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如下函数实现 22、原生JavaScript中兼容浏览器绑定元素事件 23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript...
在现有的方法后插入一个新元素,你可能会想:既然有insertBefore方法,是不是也有一个相应的insertAfter()方法。很可惜,DOM没有提供方法。 下面编写insertAfter函数,虽然DOM本身没有提供,但它确实提供了一个把一...
代码如下: //DOM没有提供insertAfter()方法 function insertAfter(newElement, targetElement){ var parent = targetElement[removed]; if (parent.lastChild == targetElement) { // 如果最后的节点是目标元素,则...
Javascript dom操作中有appendChild 和insertBefore 却没有prependChild 和insertAfter
Javascript 401数据结构和算法 目录 数据结构 挑战总结 实例化链接列表。 挑战说明 使用带有将值追加到链表末尾的append方法创建和实例化具有值的链表。 insert方法在链表的开头插入一个值,包括遍历链表并搜索给定...
1, 创建节点。 createElement(): var a = document.createElement(“p”); 它创建的是一个元素节点,所以 nodeType 等于 1 。 a.nodeName 将返回 p ;...当然我们在前面的例子中,自己写了一个insertAfter()
$li_3.insertAfter($two_li); var $one_li=$("ul li:eq(1)"); var $two_li=$("ul li:eq(2)"); $two_li.insertBefore($one_li); $("ul li:eq(1)").appendTo("ul"); $("ul li").remove("li[title!=菠萝]"); $("ul li:...
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一...
第2章 开始ExtJS之旅 2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 非常有用的开发工具 2.4.1 开发插件spket 2.4.2 FullSource 2.4.3 MicrosoftScriptDebugger 2.5 ExtJS对原有...