のappendChildは

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 [i]は、ノードオブジェクトであるため、すべてのボックスは、テキスト[対象ノード]を含むであろう。
2. document.createElement（）は、既存の要素を同じタグで再利用するため、ドキュメントに1つのボックスだけが追加されます。
3. 同じリンク要素は複数の親を持つことはできません。そのため、1つのボックスだけにリンクがあります。
4. リンクのhrefは、setAttribute（）を使用して設定する必要があります。 link.hrefプロパティを設定すると何も行われないため、ボックス内のリンクはどこにも配置されません。

答えは3だと思いますが、わからないのはなぜですか？

説明はありますか？ copyContentに1 - TNX

link: to the question

Answer 1

はあなただけchildNodes.lengthにI = 0から繰り返す必要があります。あなたのドキュメント（=第三オプション）での複数の場所にそれらを追加したい場合にも、あなたは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