document.innerHTML alternatives

[kduan]

So I'm fairly new to javascript, and I've mostly been using .innerHTML to manipulate text and other HTML elements. However reading around, most people have a very unfavorable view on this method. So my question is: What do you guys use and why is it better? or Why is .innerHTML frowned upon?

[Philip M]

Originally Posted by kduan

So I'm fairly new to javascript, and I've mostly been using .innerHTML to manipulate text and other HTML elements. However reading around, most people have a very unfavorable view on this method. So my question is: What do you guys use and why is it better? or Why is .innerHTML frowned upon?

Is it? It is true that innerHTML is non-standard, but all browsers support it.

http://www.quirksmode.org/dom/innerhtml.html
"The most obvious conclusion of these tests is that innerHTML is faster than "real" W3C DOM methods in all browsers. The W3C DOM table methods are slow to very slow, especially in Explorer." And innerHTML is less verbose than DOM methods.

Please point to a source to justify your statement that most people have a very unfavorable view on this method.

It is your responsibility to die() if necessary….. - PHP Manual

[kduan]

http://www.grauw.nl/blog/entry/475
there are a few blogs like these which points out the weaknesses of innerhtml. I for one am a fan of innerhtml, but seeing how it's "non-standard", I just wanted to know what the "standard" was. Another question is that when using .innerHTML I can't seem to get string objects to work.

[Philip M]

Originally Posted by kduan

http://www.grauw.nl/blog/entry/475
there are a few blogs like these which points out the weaknesses of innerhtml. I for one am a fan of innerhtml, but seeing how it's "non-standard", I just wanted to know what the "standard" was. Another question is that when using .innerHTML I can't seem to get string objects to work.

That is one person's opinion and I do not agree with it. As a respondent says,
"At this point, a lot of things (client-side templating, refreshing part of a page with an xmlhttprequest) can only be done in a quick and portable way by using innerHTML, so blanket statements condeming innerHTML are pointless. "

As I say, innerHTML is far less verbose than DOM methods. The same people will whicker on about the importance of saving bytes of code.

[kduan]

So now that I'm continuing to use .innerHTML, how would I be able to incorporate string objects with them?

[Philip M]

Originally Posted by kduan

So now that I'm continuing to use .innerHTML, how would I be able to incorporate string objects with them?

Not sure that I understand you - a string object is a string.

<div id = "mydiv"></div>

<script type = "text/javascript">
var string = "Hello World";
document.getElementById("mydiv").innerHTML = string;
</script>

[felgall]

Originally Posted by kduan

So I'm fairly new to javascript, and I've mostly been using .innerHTML to manipulate text and other HTML elements. However reading around, most people have a very unfavorable view on this method. So my question is: What do you guys use and why is it better? or Why is .innerHTML frowned upon?

There are a few situations where innerHTML doesn't work.

With Internet Explorer you can't use it to replace part of a table or select list. Also it doesn't update the Document Object Model in all browsers and so you can't use DOM methods to replace parts of conetent added that way.

Also innerHTML requires that the container you are adding the content into already be part of the page.

The only other disadvantages it has are that you need to enter < and > when supplying HTML tags as part of the innerHTML content and you can't use it to move parts of the page from one position in the page to another in a single command.

Given the much larger amount of code that using the standard DOM methods require to achieve the same end result there is little incentive for replacing innerHTML calls except where they don't work or where the alternative results in shorter or easier to read code.

innerHTML also has the benefit of being the simplest command for beginners to use for interacting with the web page from JavaScript without having to learn all of the DOM commands first.

The alternatives to innerHTML will involve calls to createElement and to one or more of appendChild, insertBefore, or replaceChild.