Search code examples
javascriptappendchild

Javascript appendChild() not working.

I am at a loss as to why the following is not working.

HTML: 

    ...    
        <div class="col2">
            <h2>Your Groups</h2>
            <input type="submit" id="addnew" class="btn btn-primary" value="Create New Group"/> 
            <div id="parent">
                <!--new div here-->
            </div>
        </div> 
    ...

Javascript: 

document.getElementById('addnew').onclick = function(){

    var parent = document.getElementById('parent'); 
    var newGroup = document.createElement("div"); 
    newGroup.setAttribute("id", "newGroup"); 
    newGroup.setAttribute("class", "inner");
    parent.appendChild(newGroup); 
};

Thank you in advance for your help.

Solution

  • Your code is working (assuming your JS is located below those elements). You're just not setting any content in the element.

    First, you should learn about the web developer tools in your browser. Hit "F12", and locate your "parent" div in the "elements" tab in the window that appears. Once you locate the "parent" element, click on your button. You'll see your new div appear under "parent".

    However, it's not rendering anything because it has no content. Simply do 

    newGroup.textContent = "Hello, world!";

    After creating the element with document.createElement, and you'll now have content in your child.

    Also, don't set the id of each child to the same value. Id's in HTML are meant to be unique. You perhaps should also consider using addEventListener instead of onclick in your code.