javascript - removeChild 每隔一段时间才工作一次

Question

我尝试在下一秒放置一个元素，然后删除第二个元素，但它不起作用。看例子：http: //jsfiddle.net/CZCGG/

Answer 1

结果getElementsByTagName是一个活动节点列表。当您操作元素时，您拥有的伪数组将实时更新。

特别是每次循环时，您的i值都会跳得太远，因为您刚刚删除的元素之后的元素现在具有该原始元素的索引。

要解决这个问题，您应该从数组的末尾向后工作。这可确保每个元素在循环进行时保留其原始索引。

您还应该使用Node.replaceChild而不是insertBefore,removeChild序列

见http://jsfiddle.net/alnitak/pfnGX/

var  span = document.getElementsByTagName("span");

for (var i = span.length - 1; i >= 0; --i) {
    var a = document.createElement("a");
    a.href = "http://jsfiddle.net/";
    a.innerHTML = "http://jsfiddle.net/ " + i; 

    var s = span[i];
    s.parentNode.replaceChild(a, s);
}​

Answer 2

您正在对节点列表进行操作。每次您删除一个项目时，列表都会变短，所有内容都会随机排列……但您仍在增加索引。

Answer 3

试试这个， http://jsfiddle.net/gYwSq/1/

    var  span = document.getElementsByTagName("span");
    for(i=0; span.length!=0; i++){
       var a = document.createElement("a");
       a.href = "http://jsfiddle.net/";
       a.innerHTML = "http://jsfiddle.net/ " + i; 
       span[0].parentNode.insertBefore(a, span[0]);
       span[0].parentNode.removeChild(span[0]);
    }​