返回首页 | 新开户送体验金的娱乐城

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发js AppendChild与insertBefore用法具体比照

时间:2017-09-20 编辑:admin

我们们知道appendChild和insertBefore都有刺进节点的功用。但在应用上,这两者之间仍是有一些差异的。

比方我们们要在下面这个div中刺进一个子节点P时:

div id="test" p id="x1" Node /p p Node /p /div

我们们能够这样写(测验某种状况时请将别的一种注释):
代码如下:
script type="text/phpscript"
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.inner = "This is a test";
//测验从这儿开端
//appendChild挑选:
oTest.appendChild(newNode);
//insertBefore挑选:
oTest.insertBefore(newNode,null);
/script

经过以上的代码,能够测验到一个新的节点被创立到了节点div下,且该节点是div最终一个节点。(如要检查DOM,IE能够经过IE Developer *******插件来检查,Firefox能够运用Firebug)

很明显,经过这个比如,能够知道appendChildhild和insertBefore都能够进行刺进节点的操作。

在上面的比如中有这样一句代码:oTest.insertBefore(newNode,null) ,这儿insertBefore有2个参数能够设置,第一个是和appendChild相同的,第二却是它特有的。它不仅能够为null,还能够为:
代码如下:
script type="text/phpscript"
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.inner = "This is a test";
oTest.insertBefore(newNode,refChild);
/script

这个比如将在x1节点前面刺进一个新的节点

又或:
代码如下:
script type="text/phpscript"
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
/script

这个比如将在x1节点的下一个节点前面刺进一个新的节点

还可为:
代码如下:
script type="text/phpscript"
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
/script

这个比如将在第一子节点前面刺进一个新的节点,也能够经过改动childNodes[0,1,...]来在其它方位刺进新的节点

因为可见insertBefore()挑选的特性是在已有的子节点前面刺进新的节点,但例一中运用insertBefore()挑选也能够在子节点列表末刺进新节点的。两种状况结合起来,发现insertBefore()挑选刺进节点,是能够在子节点列表的恣意方位。

从这几个比如中得出:
appendChild() 挑选在节点的子节点列表末增加新的子节点。
insertBefore() 挑选在节点的子节点列表恣意方位刺进新的节点。


浏览:

网站建设

流程

    网站建设流程