javascript - How to change innerHTML of childNodes in case some childnodes without tags? - Stack Overflow

admin管理员组

文章数量:1374952

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?

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?

• javascript
• html
• innerhtml

Share Improve this question Follow edited Oct 8, 2012 at 18:31 el Dude asked Oct 8, 2012 at 18:24 el Dudeel Dude 5,18355 gold badges3030 silver badges4040 bronze badges 4

• Just to be certain: based on your updated question, does that mean you want all five numbers to be replaced with 0? – FixMaker Commented Oct 8, 2012 at 18:34
• But I agree to dig into JQ lib and grab JS code from there, if any of course =) – el Dude Commented Oct 8, 2012 at 18:35
• @Lorax Yes, I need all childes (children?) to be accessible, but not at once, of course. – el Dude Commented Oct 8, 2012 at 18:36
• I don't think you can access the innerHTML of a non-element node; you could access the textNode's nodeValue though. – David Thomas Commented Oct 8, 2012 at 18:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

I wrote a lib called Linguigi. It would be as easy as

new Linguigi(element).eachText(function(text) {
    if(this.parentNode.tagName === 'B') {
        return "BACON";
    }
});

which turns the text of all text nodes inside b-tags to "BACON". You get the original content as "text" parameter and could transform that.

http://jsfiddle/Kz2jX/

BTW: You should get rid of the inline event handling (onclick attribute)

You can cycle through each of the nodes recursively, checking their nodeType property in turn and updating the nodeValue property with '0' if the node is a text node (indicated by nodeType == 3).

Assuming you have this HTML:

<div onclick="doReplace(this)">
    1<b>2</b>3<b>4</b>5
</div>

You can then write a simple replace function that calls itself recursively, like so:

window.doReplace = function (rootNode) {
    var children = rootNode.childNodes;
    for(var i = 0; i < children.length; i++) {
        var aChild = children[i];
        if(aChild.nodeType == 3) {
            aChild.nodeValue = '0';
        }
        else {
            doReplace(aChild);
        }
    }
}

A working fiddle can be found here: http://jsfiddle/p9YCn/1/

本文标签： javascriptHow to change innerHTML of childNodes in case some childnodes without tagsStack Overflow