Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/399.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JS循环附加子产生奇怪的行为_Javascript_Appendchild - Fatal编程技术网

Javascript JS循环附加子产生奇怪的行为

Javascript JS循环附加子产生奇怪的行为,javascript,appendchild,Javascript,Appendchild,我有这个功能: //add links to called classes function addLinks () { var classElements = []; var idElements = []; var finalRender; var expand = document.createTextNode("+"); var contract = document.createTextNode("-"); var elementsLis

我有这个功能:

//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]);
    }
}
//添加到被调用类的链接
函数addLinks(){
var classElements=[];
var理想元素=[];
var finalRender;
var expand=document.createTextNode(“+”);
var contract=document.createTextNode(“-”);
var elementsList=[];
var计数=0;
//创建dom节点
renderPElements=document.createElement(“p”);
renderAElements=document.createElement(“a”);
renderAElements.setAttribute(“href”、“#”);
setAttribute(“类”、“扩展器”);
renderAElements.appendChild(展开);
finalRender=renderElements.appendChild(renderElements);
//获取类或id设置为提供字符串的元素数组
对于(变量i=0;i
这意味着将提供的类/ID数组作为全局变量,并生成包含所有请求元素的数组。然后,通过使用appendchild在生成的数组中循环,将childnodes(在本例中为链接)附加到同级节点

然而,最终的循环并没有导致页面上有一堆额外的链接,而是附加子元素,然后立即删除它,在循环中继续工作,直到允许保留它生成的链接的最终元素


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

不能将元素附加到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=理想元素;

对于(var i=0;我可以将开始的HTML和结束的HTML添加到问题中吗?认为这会让事情更清楚…您只包含了部分代码,因此很难判断所有这些值来自何处。而且,由于您没有包含读取标记的代码,包括问题中的标记是无用的。例如,为什么要存储所有这些
rendera元素[y]
数组中的元素。看起来您只在循环中使用它们,所以它可能是一个变量。另一点,为什么您只创建一个
展开
?将它附加到循环中的每个元素将不起作用,每次迭代都需要一个新的元素。使用优化代码重新编写的问题应该是第一个版本!代码减少感谢。