将NodeList附加到HTML元素

时间:2016-07-22 15:33:29

标签: javascript dom

我有以下字符串:

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> ],您可以浏览devtools。

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

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

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

那么,Node.appendChild()期望什么类型的元素?我也尝试过HTMLCollection。

See JSFiddle

3 个答案:

答案 0 :(得分:8)

问题是Node.childNodesNodeList。因此,当您尝试追加它时,它当然会失败,因为NodeList与Node不同。您可以在循环中逐个附加子节点:

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

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

答案 1 :(得分:0)

在这种情况下,我将使用 <template> 标签。它继承自 Element,它有一个漂亮的 HTMLTemplateElement.content 属性,它为您提供一个 DocumentFragment,可以直接附加到另一个元素中。

var container = document.getElementById("app-data");
var childNodesFragment = stringToFragment(songlist);
container.appendChild(childNodesFragment);

function stringToFragment(string) {
    var renderer = document.createElement('template');
    renderer.innerHTML = string;
    return renderer.content;
};

答案 2 :(得分:-1)

现在,您可以直接使用element.append()。就像:

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