0

我有这个功能：

//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 循环生成的数组来将子节点（在这种情况下为链接）附加到兄弟节点。

然而，最终循环并没有导致页面上有一堆额外的链接，而是附加了子节点，然后立即将其删除，通过循环继续工作，直到允许保留它的最终元素生成链接。

我找不到这种行为或任何有类似问题的人的解释。

4

1 回答 1

2

您不能将一个元素附加到 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-01T14:18:26.377 回答