How to append data to div using JavaScript

Question

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

User · Accepted Answer

Try this   var div   document getElementById  divID     div innerHTML     Extra stuff

User · Answer

Even this will work   var div   document getElementById  divID     div innerHTML     Text to append

User · Answer

Why not just use setAttribute    thisDiv setAttribute  attrName   data you wish to append      Then you can get this data by     thisDiv attrName

User · Answer

If you want to do it fast and don t want to lose references and listeners use   insertAdjacentHTML      It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element  This  and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation    Supported on all mainline browsers  IE6   FF8  All Others and Mobile   http   caniuse com  feat insertadjacenthtml  Example from https   developer mozilla org en-US docs Web API Element insertAdjacentHTML      lt div id  one  gt one lt  div gt  var d1   document getElementById  one    d1 insertAdjacentHTML  afterend     lt div id  two  gt two lt  div gt         At this point  the new structure is      lt div id  one  gt one lt  div gt  lt div id  two  gt two lt  div gt

User · Answer

The following method is less general than others however it s great when you are sure that your last child node of the div is already a text node  In this way you won t create a new text node using appendData MDN Reference AppendData  let mydiv   document getElementById  divId    let lastChild   mydiv lastChild   if lastChild  amp  amp  lastChild nodeType     Node TEXT NODE     test if there is at least a node and the last is a text node    lastChild appendData  YOUR TEXT CONTENT

User · Answer

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

User · Answer

Using appendChild   var theDiv   document getElementById   lt ID OF THE DIV gt     var content   document createTextNode   lt YOUR CONTENT gt     theDiv appendChild content     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   lt ID OF THE DIV gt     theDiv innerHTML      lt YOUR CONTENT gt

User · Answer

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    lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt    and try this        divID   append data

User · Answer

java script  document getElementById  divID   html  this text will be added to div      jquery      divID   html  this text will be added to div      Use  html   without any arguments to see that you have entered  You can use the browser console to quickly test these functions before using them in your code

User · Answer

If you are using jQuery you can use     mydiv   append  html content   and it will keep the existing content   http   api jquery com append

User · Answer

IE9   Vista   solution  without creating new text nodes  var div   document getElementById  quot divID quot    div textContent    data    quot   quot    However  this didn t quite do the trick for me since I needed a new line after each message  so my DIV turned into a styled UL with this code  var li   document createElement  quot li quot    var text   document createTextNode data   li appendChild text   ul appendChild li    From https   developer mozilla org en-US docs Web API Node textContent    Differences from innerHTML innerHTML returns the HTML as its name indicates  Quite often  in order to retrieve or write text within an element  people use innerHTML  textContent should be used instead  Because the text is not parsed as HTML  it s likely to have better performance  Moreover  this avoids an XSS attack vector

[javascript] How to append data to div using JavaScript?

Examples related to javascript