javascriptdominnerhtml

Is using innerHTML += advisable?

In my web application, The initial divs required are downloaded first. Then, I send a request and get the additional absolute divs(pop up divs/warning msg divs etc.,) using ajax call. Now what I do is the below

document.body.innerHTML += secondarydivs;

Will this cause a performance hit as the body is already constructed and now I am appending even more divs? What I exactly need to know is, when this statement is excecuted, is the whole document repainted or only the additonal string gets parsed added to the DOM?

Thanks!

Solution

  • It will serialize the DOM to HTML, destroy all the existing nodes (losing bound event handlers in the process), then recreate them (and the new nodes) from the HTML.

    Use appendChild and friends.