how to append data to div using javascript

how to append data to div using javascript  using -'javascript'

I'm using ajax to append data to DIV element, where I fill the DIV from JavaScript, how can I append new data to the DIV without losing the previous data found in DIV?

asked Oct 13, 2015 by vijaygupta1980
0 votes
1 view

3 Answers

0 votes

Using appendChild:

var theDiv = document.getElementById("");
var content = document.createTextNode("");

Using innerHTML:
This approach will remove all the listeners to the existing elements as mentioned by @BiAiB. So use caution if you are planning to use this version.

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 
answered Oct 13, 2015 by sujata naik
0 votes

you can use jQuery. which make it very simple.

just download the jQuery file add jQuery into your HTML
or you can user online link:

" rel="nofollow" target="_blank">">

and try this:

answered Oct 13, 2015 by 20shahi
0 votes

Beware of innerHTML, you sort of lose something when you use it:

theDiv.innerHTML += 'content',     

Is equivalent to:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Which will destroy all nodes inside your div and recreate new ones. All references and listeners to elements inside it will be lost.

If you need to keep them (when you have attached a click handler, for example), you have to append the new contents with the DOM functions(appendChild,insertAfter,insertBefore):

var newNode = document.createElement('div');      
newNode.innerHTML = data;
theDiv.appendChild( newNode )
answered Oct 13, 2015 by okesh.badhiye