How to change innerHTML of childNodes in case some childnodes without tags?

Question

That is my example of problem

<div onclick="this.childNodes(0).innerHTML='0';">
1<b>2</b>3<b>4</b>5
</div>

as you see, two childnodes ("2" and "4") are tagged, others are simple text. The question is how to change innerHTML of tagged and untagged nodes (texts) in sertain div container without touching other nodes/texts?

Answer 1

Essentially, you'll use the data(text) property for text nodes (nodeType 3) and innerHTML otherwise (fiddle):

<div onclick="this.childNodes[0][this.childNodes[0].nodeType === 3 ? 'data' : 'innerHTML'] = '0'">
1<b>2</b>3<b>4</b>5
</div>​

[edit] I'm getting really tired of everyone offering libraries as solutions when all that's required is a simple explanation of a basic concept, e.g.: text-nodes and element nodes have differing content properties, i.e.: data and innerHTML.