追加節點列表，以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>'; 

對此我通過這個自定義函數轉換爲節點列表：

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.appendChild（）會期望什麼類型的元素？我也試過HTMLCollection。

See JSFiddle。

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]) 
}