Javascript 如何将节点列表设置为innerHtml？

我有一个节点列表，

nl

，还有一个

div#parent

---

如何将

nl

中的所有元素设置为

div#parent

的

innerHTML

？

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

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

对于包含多个元素的节点列表，需要迭代

parent.innerHTML = ''; 

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

---

尝试创建一个文档片段，并将其追加

var fragment = document.createDocumentFragment();

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

parent.appendChild(fragment);

---

当nodelists是不可接受的，那么你就可以这样做了

for（nl的let节点）parent.appendChild（节点）；

看。同时，你可能会有一些运气

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

---

如果

nl

是一个节点列表，即使它只包含一个节点，那么

appendChild

也不起作用。使用片段的想法是好的，但是如果节点列表是“活动的”，就像小提琴中使用的

childNodes

一样，那么这将起作用，因为将每个元素添加到片段会将其从列表中删除。但是，如果nodelist不是活动的，比如从

querySelectorAll

返回，那么您将得到一个无限循环。您的问题的措辞是假设解决方案涉及

innerHTML

，但实际上

innerHTML

是一把钝刀，用表示为巨大字符串的DOM内容填充元素。对于您的问题，更一般的说法是“如何将节点列表设置为元素的内容？”。请查看