CODEWITHSUNDEEP
javascripthtml
Seeker
Seeker

Reputation: 1897

Unable to Append Child in JavaScript using appendChild

I am trying to append some html which is coming as a string in a div but some how appendChild is not working as expected here is my JS code:

var doc = document.getElementById("products");
var notes = doc.getElementsByClassName("product_grid");


var str = '<div>New Node 3<div><div>New Node 4<div>';

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
notes.appendChild(child);

Here is my HTML:

<div id="products" >
    <div class="product_grid">
        <div>
            Existing node 1
            <div>
        <div>
            Existing node 2
            <div>                
    </div>
</div>

What is wrong with it its unable to Identify the appendChild as a function and keeps giving me error TypeError: notes.appendChild is not a function here is working fiddle

Upvotes: 0

Views: 777

Answers (1)

Amit Joki
Amit Joki

Reputation: 59232

notes is a NodeList. So you'll have to use index to select the elements.

Try this:

notes[0].appendChild(child); // Appends to first product_grid

Upvotes: 6

Related Questions