Добавить NodeList к HTML-элементу

у меня есть следующие строки:

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. что странно, потому что документы на Node.appendChild() скажем, что аргумент 1 должен иметь тип Node.

Итак, какой тип элемента делает Узел.метода appendChild() ожидать? Я также пробовал HTMLCollection.

См. JSFiddle.

1 ответов


проблема в том, что узел.childNodes - это узла. Поэтому, когда вы пытаетесь добавить его, это, конечно, не удается, потому что NodeList не то же самое, что узел. Вы можете добавлять дочерние узлы один за другим в loop:

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

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