JS打圈的appendChild产生奇怪的行为

我有这样的功能：JS打圈的appendChild产生奇怪的行为

//add links to called classes 
function addLinks() { 
    var classElements = []; 
    var idElements = []; 
    var finalRender; 
    var expand = document.createTextNode("+"); 
    var contract = document.createTextNode("-"); 
    var elementsList = []; 
    var count = 0; 

    //create the dom nodes 
    renderPElements = document.createElement ("p"); 

     renderAElements = document.createElement ("a"); 
     renderAElements.setAttribute("href", "#"); 
     renderAElements.setAttribute("class", "expander"); 
     renderAElements.appendChild(expand); 
     finalRender = renderPElements.appendChild(renderAElements); 


    //get arrays of elements with class or id set to provided string 
    for (var i = 0; i< show_hide_class_selectors.length; i++) { 
     classElements[i] = document.getElementsByClassName(show_hide_class_selectors[i]); 

     //if prevents null value appearing in array and freezing script 
     if (document.getElementById(show_hide_class_selectors[i])) { 
     idElements[i] = document.getElementById (show_hide_class_selectors[i]); 
     } 
    } 

    //loop though selected id's/classes and generate a single array of selected elements 
    for (var i = 0; i< idElements.length; i++) { 
     elementsList[count] = idElements[i]; 
     count = count +1; 
    } 

    //must loop twice as variable is 2 dimensional i=class name y=elements of that class 
    for (var i = 0; i< classElements.length; i++) { 
     for (var y = 0; y< classElements[i].length; y++) { 
     elementsList[count] = classElements[i][y]; 
     count = count +1; 
     } 
    } 

    //render 
    for (var i = 0; i< elementsList.length; i++) { 
     alert ("render"); 
     elementsList[i].parentNode.firstChild.appendChild(finalRender); 

     alert (elementsList[i]); 
    } 
}

其目的是要采取一个全局变量提供的类/ ID数组，然后生成包含所有请求元素的数组。然后它应该通过使用appendchild循环生成的数组来追加子节点（本例中为链接）到兄弟节点。

然而，不是导致一个页面上有一堆额外的链接，而是最终的循环而是附加了子节点，然后立即删除它，直到最后一个元素被允许保留为止生成的链接。

我无法找到解释此行为或任何人有类似的问题。

来源

2011-07-01 YsoL8

您可以添加您开始使用的HTML，以及您想要结束问题的HTML吗？认为这会让事情变得更加清晰...... –

您只包含部分代码，因此很难说明所有这些值的来源。因为你没有包含读取标记的代码，包括你的问题中的标记是没用的。例如，为什么要将所有'renderAElements [y]'元素存储在数组中。看起来你只能在循环中使用它们，所以它可能只是一个变量。还有一点，你为什么只创建一个'expand'？将它追加到循环中的每个元素都不起作用，每次迭代都需要一个新元素。 – davin

用优化代码重写问题 – YsoL8

您不能将元素附加到DOM中的多个位置。你需要的finalRender（和后代）通过循环每次追加单独副本：

elementsList[i].parentNode.firstChild.appendChild(finalRender.cloneNode(true));

请记住，不同的浏览器处理与绑定的事件不同的克隆元素：有的将结束与具有克隆与原始相同的事件，其他事件不会。

此外，为简洁起见，这些循环正在尖叫。中间两个可以只用被完全替换：

elementList = idElements; for (var i=0; i<classElements.length; ++i) elementList = elementList.concat(classElements[i]);

，或者甚至更好，只是构建elementList直接在第一循环中，这样你就不会做了一堆，你实际上并不以后使用阵列，或者甚至是最好的，只要在第一个循环中进行追加。

来源

2011-07-01 14:18:26 Josh

应该看到第一个版本！减少编码。 – YsoL8

JS打圈的appendChild产生奇怪的行为

回答

相关问题