javascript - appendChild to array 仅追加到最后一个元素

Question

如您所见，我仍然是 javascript 的新手为什么只能附加一次 Textnode？当您在其他地方再次添加它时，第一个消失

我不需要问题的解决方案我只是好奇是什么导致了这种行为。仅将文本节点添加到数组的最后一个元素的示例:

function hideAdd(){
    var hide = document.createTextNode('Afbeelding verbergen');
    var afb = collectionToArray(document.getElementsByTagName('img'));  
    afb.pop();
    var divs = [];
    for (i=0; i < afb.length; i++){
        divs.push(afb[i].parentNode);

    }
    console.log(divs);
    for ( i = 0; i < divs.length;i++){
        divs[i].appendChild(hide);      
    }
}

这是您使用唯一文本节点的地方，因此它可以工作:

function hideAdd(){
    var hide = []
    var afb = collectionToArray(document.getElementsByTagName('img'));  
    afb.pop();
    var divs = [];
    for (i=0; i < afb.length; i++){
        divs.push(afb[i].parentNode);
        hide[i] = document.createTextNode('Afbeelding verbergen');

    }
    console.log(divs);
    for ( i = 0; i < divs.length;i++){
        divs[i].appendChild(hide[i]);       
    }
}

Answer 1

简短的回答是 DOM 是一棵树，而不是一个网络。每个节点只能有一个父节点。如果您可以在多个位置添加一个节点，它就会有多个父节点。