Debate - innerHTML vs DOM Methods

[snap2000]

california said:

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);

Actually, the text is still a child node. You can remove/replace it just like any other.

[acoolie530]

Yes, the text is a DOM Element (#text).

www.quirksmode.org/dom/tests/children.html

So...
^{_{document.getElementByID("blah").removeChild(document.getElementByID("blah").firstChild);}}

[california]

Ah okay, I was confusing childNodes with children. Apparently childNodes includes text and children refers only to HTML tags?

[Peter]

california said:

Ah okay, I was confusing childNodes with children. Apparently childNodes includes text and children refers only to HTML tags?

Yeah, children is a collection of all elements in the current element except for text nodes. So the best thing to use would be childNodes, as children is IE only.

[Ross]

DOM is just too confusing for me All these parents and children all over the place. I think I would rather stick to the easy innerHTML for now

[[HkK Rly]]

elindir said:

DOM is just too confusing for me All these parents and children all over the place. I think I would rather stick to the easy innerHTML for now

Same for me I don't have time to use this DUM stuff. innerHTML is much easier to use than DOM IMO.

[Bradley]

Most of the time I'll do something like this:

var someChild = document.createElement("span");
someChild.innerHTML = "Weeeeeeeeeeee";
someChild.style.color = "#ff0000";
var someDiv = document.getElementsByTagName("div")[2];
someDiv.appendChild(someChild);

I just end up mixing in whatever is convenient.

[J. Meeter]

maddenking2 said:

elindir said:

DOM is just too confusing for me All these parents and children all over the place. I think I would rather stick to the easy innerHTML for now

Same for me I don't have time to use this DUM stuff. innerHTML is much easier to use than DOM IMO.

It may be easier, but it's wrong.