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!


3 thoughts on “innerHTML vs appendChild

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s