javascript - childNodes 中的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] 是一个节点对象，因此所有框都将包含文本[Object Node]。
2. document.createElement() 重用具有相同标签的现有元素，因此只向文档中添加一个框。
3. 同一个链接元素不能有多个父元素，因此最终只有一个框包含一个链接。
4. 必须使用 setAttribute() 设置链接的 href；设置属性 link.href 不会执行任何操作，因此框中的任何链接都不会指向任何地方。

我猜答案是 3，但不确定也不知道为什么？

有什么解释吗？ TNx

link: to the question

Answer 1

您应该仅在 copyContent 中从 i = 0 迭代到 childNodes.length - 1。另外，你应该 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