...

View Full Version : Difference between Insert and innerHTML?



Krupski
01-20-2012, 03:03 PM
Hi all,

I use JS to dynamically generate HTML such as a <select> dropdown menu. I do it by placing an empty element where I want the dropdown to appear (i.e. <span id="dropdown"></span>) then getElementById('dropdown') and insert the HTML with innerHTML = html.

But I could also do it by getting the empty element and then doing an "insertBefore" or "appendChild" call.

Is one "preferred" over the other? Is one "better" than the other?

Thanks.

-- Roger

devnull69
01-20-2012, 03:11 PM
It is always preferred to use insertBefore or appendChild.

The browser has to build the DOM structure from the HTML anyway, so if you tell the browser exactly how the structure will look like, it will always be faster than innerHTML.

Performance test: http://jsperf.com/appendchild-vs-innerhtml2

Krupski
01-20-2012, 05:51 PM
It is always preferred to use insertBefore or appendChild.

The browser has to build the DOM structure from the HTML anyway, so if you tell the browser exactly how the structure will look like, it will always be faster than innerHTML.

Performance test: http://jsperf.com/appendchild-vs-innerhtml2

Wow... I ran that test - what a difference!

BTW, did you just make up that test? The site says it was written 3 hours ago.

Thanks very much!

-- Roger

devnull69
01-20-2012, 07:50 PM
yes I did :-)

mjy
01-21-2012, 03:33 AM
Another general reason to use insertBefore or appendChild rather than innerHTML, is that innerHTML is a non-standard property. Although it's supported by all modern browsers, there are differences and quirks in its implementation (for example, markup containing & characters can cause all sorts of trouble, or the markup might get displayed in the browser but not added to the DOM).

felgall
01-21-2012, 04:02 AM
Here are some situations where you can NOT use innerHTML.

- You can't use innerHTML to update a part of a table - Internet Explorer will only allow the entire table to replaced or a single cell's content.

- You can't use innerHTML to add script tags to the page as the script tag will be added but the script will not load and will never run.

- You can't use innerHTML if you are adding something you want to be able to update later from JavaScript - eg in there is an id on a tag within the content to be added then you will not be able to use getElementById to reference that id and update its content - you would have to replace the entire content of the innerHTML.

Basically, innerHTML updates the visual appearance of the page without updating the interface that JavaScript uses to access the page whereas insertBefore and appendChild update the interface and the visual appearance changes as a result of the change to the interface.

devnull69
01-21-2012, 12:09 PM
- You can't use innerHTML to update a part of a table - Internet Explorer will only allow the entire table to replaced or a single cell's content.

- You can't use innerHTML to add script tags to the page as the script tag will be added but the script will not load and will never run.

- You can't use innerHTML if you are adding something you want to be able to update later from JavaScript - eg in there is an id on a tag within the content to be added then you will not be able to use getElementById to reference that id and update its content - you would have to replace the entire content of the innerHTML.

Basically, innerHTML updates the visual appearance of the page without updating the interface that JavaScript uses to access the page whereas insertBefore and appendChild update the interface and the visual appearance changes as a result of the change to the interface.

I agree with the first two, but the last two sentences prove to be wrong

e.g. you can do this


document.body.innerHTML += '<div id="mytest">Test</div>';
document.getElementById("mytest").innerHTML = "My Test";
alert(document.getElementById("mytest").innerHTML); // will give you "My Test"

felgall
01-21-2012, 10:53 PM
I agree with the first two, but the last two sentences prove to be wrong

e.g. you can do this


document.body.innerHTML += '<div id="mytest">Test</div>';
document.getElementById("mytest").innerHTML = "My Test";
alert(document.getElementById("mytest").innerHTML); // will give you "My Test"


In some browsers. If you were to test in all the popular browsers you will find at least one where that doesn't work. I know because I actually wrote code like that for a script once and then found that it broke in a browser I'd forgotten to include in the test. Someone using that browser was very quick to tell me about it.

I was attempting to actually change the content of that innerHTML in the code I had in that script so possibly you can still read the content using innerHTML but can't update it.

Philip M
01-22-2012, 10:29 AM
In some browsers. If you were to test in all the popular browsers you will find at least one where that doesn't work. I know because I actually wrote code like that for a script once and then found that it broke in a browser I'd forgotten to include in the test. Someone using that browser was very quick to tell me about it.

I was attempting to actually change the content of that innerHTML in the code I had in that script so possibly you can still read the content using innerHTML but can't update it.

I have to say that this seems to work in IE9 and all modern (popular) browsers.


<script type = "text/javascript">

document.body.innerHTML += '<div id="mytest">Test</div>';
document.getElementById("mytest").innerHTML = "My Test";
alert(document.getElementById("mytest").innerHTML); // will give you "My Test"
document.getElementById("mytest").innerHTML = document.getElementById("mytest").innerHTML.replace(/My/,"Your")
alert(document.getElementById("mytest").innerHTML); // will give you "Your Test"
document.getElementById("mytest").innerHTML = document.getElementById("mytest").innerHTML + " works OK";
alert(document.getElementById("mytest").innerHTML); // will give you "Your Test works OK"

</script>

I tried devnull69's link and it crashed my browser (IE9) :(

felgall
01-22-2012, 07:18 PM
I have to say that this seems to work in IE9 and all modern (popular) browsers.

I can't remember which browser it was that couldn't handle it. It was about three or four years ago.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum