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 element to the HTML 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, and that’s why you loose the value if input box!

So which one is better? Evaluate it by your self.

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