将 NodeList 附加到 HTML 元素

Question

我有以下字符串：

 var songlist = '<div class="list-item" id="57902ccae53fa51716424034"><div class="media"><img src="{imgsrc}" alt="Mama Tried" /></div><h4 class="title">Mama Tried</h4><div class="song-controls"><button class="song play"><span class="fa fa-play"></button></div></div><div class="list-item" id="57902cddae7b54e264fcc6e4"><div class="media"><img src="{imgsrc}" alt="Blue Eyes Crying In the Rain" /></div><h4 class="title">Blue Eyes Crying In the Rain</h4><div class="song-controls"><button class="song play"><span class="fa fa-play"></button></div></div>';

我正在通过此自定义函数将其转换为 NodeList：

 var toDom = function(str) {
  var tmp = document.createElement("div");
  tmp.innerHTML = str;
  return tmp.childNodes;
};

console.log(toDom(songlist)) 输出 NodeList [ <div#57902ccae53fa51716424034.list-item>, <div#57902cddae7b54e264fcc6e4.list-item> ] ，您可以浏览开发工具。

当我尝试将集合附加到节点时……

 document.getElementById("app-data").appendChild(toDom(songlist));

我得到 TypeError: Argument 1 of Node.appendChild does not implement interface Node. 这很奇怪，因为 Node.appendChild() 的文档 说参数 1 必须是 Node 类型。

那么，Node.appendChild() 需要什么类型的元素呢？我也尝试过 HTMLCollection。

请参阅 JSFiddle 。

原文由 coderMe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是 Node.childNodes 是一个 NodeList 。因此，当您尝试附加它时，它当然会失败，因为 NodeList 与 Node 不同。您可以在循环中一个接一个地追加子节点：

 var container = document.getElementById("app-data");
var childNodes = toDom(songlist);

for (var i = 0; i < childNodes.length; i++) {
    container.appendChild(childNodes[i])
}

原文由 dfsq 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在，你可以直接使用 element.append() 和 element.childNodes 了。就像：

 var container = document.getElementById("app-data");
var childNodes = toDom(songlist);
container.append(...childNodes)
function toDom(str) {
  var tmp = document.createElement("div");
  tmp.innerHTML = str;
  return tmp.childNodes;
};

原文由 defend orca 发布，翻译遵循 CC BY-SA 4.0 许可协议