AppendChild из ChildNodes не работает

Question

Это интересный вопрос, который я видел в сети, но не знаю ответа:

Следующий код предназначен для добавления пяти одинаковых коробок, содержащих ссылки на этот документ, но не работает должным образом. Почему нет?

// Copies the contents of one box into another 
function copyContents(from, to){ 
    for(var i=0; i<=from.childNodes.length-1; i++){ 
     to.appendChild(from.childNodes[i]); // <---- Error on this line. 
    } 
} 

//create a box to copy: 
var referenceBox = document.createElement('div'); 

var link = document.createElement('a'); 
link.href = 'http://www.example.com/'; 
link.textContent = 'A link'; 

referenceBox.appendChild(link); 

//Add box copies to the document 
for(var i=0; i<5; i++){ 
    var newBox = document.createElement('div'); 
    copyContents(referenceBox, newBox); 

    document.body.appendChild(newBox); 
} 

Опции:

1. to.appendChild() ожидает, HTML, но from.childNodes [я] является объектом узла, поэтому все коробки будут содержать тексты [Node Object].
2. document.createElement() повторно использует существующие элементы с тем же тегом, поэтому к документу добавляется только один ящик.
3. Тот же элемент ссылки не может иметь несколько родителей, поэтому только один ящик заканчивается ссылкой.
4. Ссылка href связи должна быть установлена ​​с помощью setAttribute(); установка свойства link.href ничего не сделает, поэтому ни одна из ссылок в боксах не укажет нигде.

Я думаю, что ответ 3, но не уверен и не знает почему?

Любое объяснение? Tnx

link: to the question

Answer 1

Вы должны перебирать только я = 0 до childNodes.length - 1 в copyContent. Кроме того, вы должны clone DOM узлы, если вы хотите добавить их в нескольких местах в документе (= третий вариант):

// Copies the contents of one box into another: 
 
function copyContents(from, to) { 
 
    for (var i = 0; i < from.childNodes.length; i++) { // <-- change <= to < 
 
     to.appendChild(from.childNodes[i].cloneNode(true)); // <-- add cloneNode(true); to clone node and all its children 
 
    } 
 
} 
 

 
// Create a box to copy: 
 
var referenceBox = document.createElement('div'); 
 

 
var link = document.createElement('a'); 
 
link.href = 'http://www.example.com/'; 
 
link.textContent = 'A link'; 
 

 
referenceBox.appendChild(link); 
 

 
// Add box copies to the document: 
 
for (var i = 0; i < 5; i++) { 
 
    var newBox = document.createElement('div'); 
 
    copyContents(referenceBox, newBox); 
 

 
    document.body.appendChild(newBox); 
 
}

Смотрите также appendChild only works first time