如何将nodelist设置为innerHtml？

Question

我有一个节点列表，nl和一个div#parent。

如何将nl中的所有元素设置为div#parent的{​​{1}}？

Answer 1

首先清空父级，然后使用appendChild追加DOM元素

parent.innerHTML = '';
parent.appendChild(nl);

对于包含多个元素的nodeLists，需要迭代

parent.innerHTML = ''; 

[].forEach.call(nl, function(item) {
    parent.appendChild(item);
});

FIDDLE

Answer 2

当节点列表是可迭代的时候，你可以做

for (let node of nl) parent.appendChild(node);

见Are HTMLCollection and NodeList iterables?。与此同时，你可能会有运气

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

Answer 3

尝试创建文档片段并将其附加。

var fragment = document.createDocumentFragment();

while(nl.length) 
    fragment.appendChild(nl[0]);

parent.appendChild(fragment);

Demo