Javascript:DIV AppendChild

javascript appendchild
user1357872 picture user1357872 · Apr 26, 2012 · Viewed 54.8k times · Source

In the below code "objTo" is a div to which i need to insert multiple number of div. when i use the code for the first time its working.but on the next time its overwriting the existing code.

     <script>

var divtest= document.createElement("div");        
divtest.innerHTML = "<div>new div</div>"         
objTo.appendChild(divtest)
    </script>

Where am i going wrong?

Answer

Marc Uberstein picture Marc Uberstein · Apr 26, 2012

I have made a very simple working version for you :

http://jsfiddle.net/hQKy9/

Multiple clicks works the whole time :

Script

function addDiv() {
    var objTo = document.getElementById('container');
    var divtest = document.createElement("div");
    divtest.innerHTML = "new div";
    objTo.appendChild(divtest);
}

Html

<div id="container"></div>

<input type="button" onclick="addDiv();" value="Click here to add div"/>

Related questions

How to Append <script></script> in javascript?

I need to use childappend or jquery append() to append some tag stuff into the document. From what I can tell, this is getting stripped out. Anyone know how to do it?

Read More
jQuery append() vs appendChild()

Here's some sample code: function addTextNode(){ var newtext = document.createTextNode(" Some text added dynamically. "); var para = document.getElementById("p1"); para.appendChild(newtext); $("#p1").append("HI"); } <div style="border: 1px solid red"> <p id="p1">First line …

Read More
Javascript Append Child AFTER Element

I would like to append an li element after another li inside a ul element using javascript, This is the code I have so far.. var parentGuest = document.getElementById("one"); var childGuest = document.createElement("li"); childGuest.id = "two"; I am …

Read More