我在网上看到了一个有趣的问题,但不知道答案:
以下代码旨在添加五个相同的框,其中包含指向文档的链接,但无法正常工作。为什么不?
// 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);
}
选项:
to.appendChild()需要HTML,但是from.childNodes [i]是节点对象,因此所有框都将包含文本[Object Node]。
document.createElement()重用具有相同标签的现有元素,因此仅将一个框添加到文档中。
同一链接元素不能有多个父元素,因此只有一个框最终带有链接。
必须使用setAttribute()设置链接的href。设置属性link.href不会执行任何操作,因此框中的任何链接都不会指向任何地方。
我猜答案是3,但不确定,也不知道为什么?
有什么解释吗?特纳克斯
link: to the question
最佳答案
您只应从i = 0迭代到copyContent
中的childNodes.length-1。另外,如果要将DOM节点附加到文档中的多个位置(=第三个选项),则应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
关于javascript - 来自childNodes的appendChild不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37800055/