Dynamically append Div in HTML JavaScript

Question

I have created a div in HTML and want to add inner div dynamically to it. Below is the code for HTML:

<div id="table">
    <div class="row">
        This is the Demo First row Content.
        <div class="cell1">
            Cell 1 Content
        </div>
        <div class="cell2">
            Cell 2 Content
        </div>
    </div>
    <div class="row">
        This is the Demo Second row Content.
        <div class="cell1">
            Cell 1 Content
        </div>
        <div class="cell2">
            Cell 2 Content
        </div>
    </div>
</div>

<input type="button" value="Add New Row" onclick="addNewRow()"  />

My CSS is:

div {
       border: 1px dotted red;
       padding: 10px;    
    }

And I have done the JavaScript for it but it is not working. The JavaScript is:

function addNewRow {
    var table = document.getElementById('table');

    var rDiv = document.createElement('div');

    table.appendChild(rDiv);

    rDiv.innerHTML = "This is the Demo Third row Content.";

    var c1Div = document.createElement('div');
    rDiv.appendChild(c1Div);
    c1Div.innerHTML = "Cell 1 Content";

    var c2Div = document.createElement('div');
    rDiv.appendChild(c2Div);
    c2Div.innerHTML = "Cell 2 Content";
}

But when I executed it, the new rows are not added. Please guide me what I am missing.

Tibos · Accepted Answer · 2013-09-18 14:39:09Z

2

You have a typo preventing the execution of the function. The correct name is document.getElementById (line 2 in JS).

You might want to enable the console (F12 IE debugger, Firebug, Developer Tools, etc) for debugging next time. These kinds of errors are very easy to spot.

Here is a working JsBin: http://jsbin.com/egImArO/1/edit

edited Sep 18, 2013 at 14:39

answered Sep 18, 2013 at 14:20

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MKD Over a year ago

I have cleared it. But still show **Uncaught TypeError: Cannot call method 'appendChild' of undefined **...

Maulik patel · Accepted Answer · 2013-09-18 14:41:35Z

0

define javascript function like function addNewRow() { not a function addNewRow {

answered Sep 18, 2013 at 14:41

Maulik patel

1,6018 gold badges23 silver badges45 bronze badges

Comments

itzmukeshy · Accepted Answer · 2013-09-21 05:53:20Z

0

Just replace first js code line with this one:-

function addNewRow(){

answered Sep 21, 2013 at 5:53

itzmukeshy

1

Collectives™ on Stack Overflow

Dynamically append Div in HTML JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related