用的insertBefore错误,并非所有的元素插入

如果用标记字符串不甘示弱,例如通过把间距>< ,效果是不同的。

<!DOCTYPE html> <head><title>insertBefore error</title></head> <body> <div id='myElement'>above this div 3 elements should be inserted but actually only 2 are, text2 is missing</div> <script type="text/javascript"> referenceTag = document.getElementById('myElement'); var newElement = document.createElement('div'); newElement.innerHTML = '<div>text1</div><pre>text2</pre><p>text3</p>'; for (i=0; i<newElement.childNodes.length; i++) { alert(newElement.childNodes[i].tagName); //if you comment-out following line there are 3 alerts but otherwise only two. referenceTag.parentNode.insertBefore(newElement.childNodes[i],referenceTag); } </script> </body>

--------------解决方案-------------

当你打电话insertBefore在移动节点,以便它成为一个孩子referenceTag.parentNode 。 在这一点上它不再的子newElement所以newElement.childNodes收缩由之一。

然后,您递增i ,让你保持跳绳的元素。

  1. 移动节点0
  2. 什么是节点1变成0点
  3. 您将新节点 1,保留旧节点1(与当前节点0)的后面。

你可能想:

while (newElement.firstChild) {
alert(newElement.firstChild.tagName);
referenceTag.parentNode.insertBefore(newElement.firstChild,referenceTag);
}


如果用标记字符串不甘示弱,例如通过把之间>空间<,效果是不同的。

效果实际上是相同的,但很难看到。 插入空格意味着不是有沿行的数据结构:

[ elementNode, elementNode, elementNode ]

你有:

[ elementNode, textNode, elementNode, textNode, elementNode ]

既然你跳过所有其他节点,每个其他节点完全由空白的文本节点,你不能看到效果。

当你插入节点:

referenceTag.parentNode.insertBefore(newElement.childNodes[i],referenceTag);

长度newElement.childNodes.length总是由1减。此外,元素的索引更改在其他人之前删除元素,所以你应该存储长度为for循环,总是使用索引0:

referenceTag = document.getElementById('myElement');
var newElement = document.createElement('div');
newElement.innerHTML = '<div>text1</div><pre>text2</pre><p>text3</p>';
var storeLength = newElement.childNodes.length
for (i=0; i<storeLength; i++) {
alert(newElement.childNodes[0].tagName);
//if you comment-out following line there are 3 alerts but otherwise only two.
referenceTag.parentNode.insertBefore(newElement.childNodes[0],referenceTag);
}

例如:http://jsfiddle.net/djttp/5/

问题在于newElement.childNodes是节点的实时收集。 所以每当你访问它的属性,集合重新评估,更新以反映DOM的当前状态。

例:

第一次迭代

i = 0
newElement.childNodes[0] == '<div>'
newElement.childNodes[1] == '<pre>'
newElement.childNodes[2] == '<p>'
newElement.childNodes.length == 3

<div>元素前缀。

第二次迭代:

i = 1
newElement.childNodes[0] == '<pre>'
newElement.childNodes[1] == '<p>'
newElement.childNodes.length == 2

<p>元素前缀。

第三次迭代:

i = 2
newElement.childNodes[0] == '<pre>'
newElement.childNodes.length == 1

循环停止,因为条件不满足。

@Quentin提供了针对此问题的一个好办法。

分类:JavaScript的 时间:2015-03-15 人气:0
本文关键词: JavaScript的
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.611 (s). 10 q(s)