Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Append NodeList to HTML element

Tags:

javascript

dom

I have the following string:

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

Which I am converting to a NodeList through this custom function:

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

console.log(toDom(songlist)) outputs NodeList [ <div#57902ccae53fa51716424034.list-item>, <div#57902cddae7b54e264fcc6e4.list-item> ], which you can browse through the devtools.

When I try to append the collection to a node...

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

I get TypeError: Argument 1 of Node.appendChild does not implement interface Node. Which is odd, because the docs for Node.appendChild() say that argument 1 must be of type Node.

So, what type of element does Node.appendChild() expect? I've also tried HTMLCollection.

See JSFiddle.

like image 885
coderMe Avatar asked Jul 22 '16 15:07

coderMe


People also ask

How do you append a child to an element?

To create a new element to be inserted at the end of a parent node, first use createElement to create it and then appendChild() for the newly-created element. The appendChild() method also works on existing child nodes, using which you can move them to new positions within the document.

How do you append innerHTML?

To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

What is NodeList in HTML?

A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes). HTMLCollection items can be accessed by their name, id, or index number. NodeList items can only be accessed by their index number. An HTMLCollection is always a live collection.

Can you appendChild to a div?

Use appendChild to Append Data to Div in JavaScript Like the previous method, we first select the div by using one of the selectors. But instead of innerHTML , we use appendChild because of the problems discussed in the previous method. Before appending a child, we have to create the text node.


1 Answers

The problem is that Node.childNodes is a NodeList. So when you try to append it, it fails of course, because NodeList is not the same as Node. You could append child nodes one by one in loop:

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

for (var i = 0; i < childNodes.length; i++) {
    container.appendChild(childNodes[i])
}
like image 128
dfsq Avatar answered Oct 06 '22 00:10

dfsq