insertBefore与insertAfter

andayfour 2013-10-21 12:31:36

JavaScript DOM编程艺术
我最近看这个，看到动态创建html；介绍的insertBefore函数，没有insertAfter函数，然后作者便自己创建一个insertAfter函数，代码如下
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
我的问题在这个lastChild上
比如：
<body>
<p id="test">xxx</p>
</body>
var pObj=document.getElementById("test");
然后我创建一个元素对象A，要插在pObj后
insertAfter(A,pObj);
pObj.parentNode是body，body的lastChild应该是文本节点xxx才对。也就是说对象A应该插在元素节点与文本节点之间。但是书中效果又不是这样的。有没有人看过这个函数，怎么理解的？

...全文

356 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

l676331991 2013-10-21

打赏
举报

lastChild说的是child,不是grandson，所以不会是XXX的，XXX是孙子辈的了。

不过，分析看来，如果源码换行了，(body的>和p的<没有直接接上，而是出现换行或空格)，那么实际中间有一个textNode节点的。也就是说body其实有3个子节点， body ├─textNode ├─p │ └─textNode(nodeValue=XXX) └─textNode 因此，p不是body的lastChild，最后那个textNode才是！然而一般空的textNode对我们根本没有意义，现代浏览器引入了lastElementChild。在没有这个属性的浏览器上，只能通过previousSibling然后判断nodeType逐一来排除textNode了找到我们要的Element。类似的有firstChild，previousSibling，nextSibling，在现代浏览器中都有其Element版本。