Tag Archives: DOM

innerHTML vs appendChild


Today I was testing my code, and I found interesting stuff on innerHTML property and appendChild method.

I was trying to add new elements to the div.

First, I was creating element by calling DOM method (document.createElement()) and then I append it to my div by calling appendChild() method of the HTML div element.

But then I changed the logic by using innerHTML property of the HTML div element.

I was doing the same thing by two different way, but what is the difference?

Well try out this page, and notice the difference!

Hold on, think twice if you didn’t get the difference.

Okay! I hope that you are a good tester and found the difference that clicking on ‘Add by DOM’ button, you don’t loose the value of the input box, while clicking on ‘Add by innerHTML’ button you loose the value of input box.

Okay, so changing the innerHTML property will force  recreation of div by browser, and that’s why you loose the value if input box!

So which one is better?

I saw that people are taking lot about the speed of both the technique (check here), but my this post is just to remind the causes of changing the technique!