Debate - innerHTML vs DOM Methods

[Peter]

I thought it would be good to have debates on things like this. So, if you are in favour of one of them, state your opinion as to why you prefer it, and what makes it better then the other.

Please be serious, no 1 sentence replies.

And stay on topic please

[california]

DOM:

var newSpan = document.createElement("span");
newSpan.style.color="#ff0000";
newSpan.style.fontSize="13px;"
newSpan.style.textAlign="right";
var newTxt=document.createTextNode("hello world");
newSpan.appendChild(newTxt);
object.appendChild(newSpan);

innerHTML:

object.innerHTML+='<span style="color: #ff0000; font-size: 13px; text-align: right;">hello world</span>';


There's no question which one I'd use. I only use DOM for tables (insertRow() and the like). I also use child/sibling/parent related properties pretty frequently. Both are good for different things, but when it comes to appending HTML to (or replacing HTML in) an element, innerHTML is the only option for me. The code is shorter and executes faster.

[Ben Woodruff]

I only use innerHTML because I know how to use it. =P
DOM sounds cleaner, but takes more code, and more effort, and I just don't use JavaScript enough to learn how to use it.

[squalleh]

Been reading a lot about innerHTML against the DOM.

Must say though, I am all for the DOM. Some reasons:

1.) Biggest one I believe: the browser should not be creating HTML Objects through strings. It's much more proper to be creating them through the DOM than through an innerHTML string.

2.) innerHTML is not a Web Standard and likely never will be.

3.) HTML is structured and simply writing it out into the document through JavaScript completely abolishes that whole concept. So, through using innerHTML you're also destroying other Standards.

4.) Second biggest I believe: innerHTML is buggy in Gecko Engines (Firefox for example). I'm a hardcore FF user and so of course I'd rather write code which would work best under my browser as well as others.

---

So, while I don't use innerHTML any longer do to the above reasons (plus some more), I also can't see it ever going away completely. However well abused it is, you can count on IE to continue supporting it. So, even if in the near-future Firefox gets rid of its support for that object, lazy scripters will continue with it, in hopes that IE will still support it for the years to come.

[california]

There is no DOM alternative to using object.innerHTML.match(X) in conditionals, as far as I know. I don't see how it's possible to never use innerHTML.

[Peter]

california said:

There is no DOM alternative to using object.innerHTML.match(X) in conditionals, as far as I know. I don't see how it's possible to never use innerHTML.

It's possible, just requires more work, and will likely be mozilla only (Read up on createContextualFragment()).

Anyway, there's nothing wrong with reading using innerHTML, as that doesn't effect the nodeness of the document. But writing will, that's why I prefer DOM methods.

[kitsunex]

I use DOM for big projects only.

But if I'm making something needed quick, then I use innerHTML.

[california]

Ah okay, but let's say I have something like this:

<span id="blah">Hello World</span>

And I want to change it to "Goodbye World" without writing using innerHTML or removing the span element completely and creating a new one. How exactly could that be done? Using innerHTML:

document.getElementById("blah").innerHTML="Goodbye World";

Using DOM you could add a text node that says goodbye world, but how would you remove the existing text, since it isn't in any sort of 'child' so you can't use removeChild() or replaceChild(). Would this work?

var oldText=document.createTextNode("Hello");
var newText=document.creatTextNode("Goodbye");
document.getElementById("blah").replaceChild(oldText,newText);

[Peter]

If it was me, I would use replaceData(). It will replace text in the current text node with new text.

[california]

That's the other thing I hate about DOM. Way too many functions to remember...

[Peter]

california said:

That's the other thing I hate about DOM. Way too many functions to remember...

lol, yep, tons of them.

[hey]

InnerHTML. Short and sweet. However, one code did freeze up on me in Firefox.

[J. Meeter]

DOM, because it's standards-compliant.

If anyone is unfamiliar with DOM, just read here: en.wikipedia.org/wiki/Document_Object_Model

[frufru]

Who cares... use innerHTML. Compatibility with IE and Firefox is enough

[J. Meeter]

frufru said:

Who cares... use innerHTML. Compatibility with IE and Firefox is enough

A lot of people care.