추가] NodeList를 HTML 요소에

Question

나는 다음과 같은 문자열이 있습니다

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> ], 당신은 찾아 볼 수 있습니다 :이 사용자 정의 기능을 통해 NodeList를로 변환하고

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>'; 

devtools.

내가 노드에 컬렉션을 추가하려고

...

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

나는 docs for Node.appendChild()가 인수 한 유형의 노드이어야합니다 말을하기 때문에, 홀수 TypeError: Argument 1 of Node.appendChild does not implement interface Node. 얻을.

그래서 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]) 
}