While creating a Firefox addon, I've run into a weird problem.
I have an array of nodes, returned by some iterator. Iterator returns only nodes, containing Node.TEXT_NODE as one or more of it's children. The script runs on page load.
I have to find some text in that nodes by regexp and surround it with a SPAN tag.

//beginning skipped  
var node = nodeList[i];    
var node_html = node.innerHTML;  
var node_content = node.textContent;  
if(node_content.length > 1){  
    var new_str = "<SPAN class='bar'>" + foo + "</SPAN>";  
    var regexp = new RegExp( foo , 'g' );  
    node_html = node_html.replace(regexp, new_str);  
    node.innerHTML = node_html;  
}

Basic version looked like this, and it worked except one issue - node.innerHTML could contain attributes, event handlers, that could also contain foo, that should not be surrounded with <span> tags.
So I decided to make replacements in text nodes only. But text nodes can't contain a HTML tag, so I had to wrap them with <div>. Like this:

var node = nodeList[i];
for(var j=0; j<node.childNodes.length; j++){
    var child = node.childNodes[j];
    var child_content = child.textContent;
    if(child.nodeType == Node.TEXT_NODE && child_content.length >1){
        var newChild = document.createElement('div');
//          var newTextNode = document.createTextNode(child_content);
//          newChild.appendChild(newTextNode);
        var new_html = child_content;            
        var new_str = "<SPAN class='bar'>" + foo + "</SPAN>";
        var regexp = new RegExp( foo , 'g' );
        new_html = new_html.replace(regexp, new_str);
        newChild.innerHTML = new_html;
        alert(newChild.innerHTML);
        node.replaceChild(newChild, child);
    }
}

In this case, alert(newChild.innerHTML); shows right html. But after the page is rendered, all <div>s created are empty! I'm puzzled.
If I uncomment this code:

//          var newTextNode = document.createTextNode(child_content);  
//          newChild.appendChild(newTextNode);  

alert also shows things right, and <div>s are filled with text (textNode adding works ok) , but again without <span>s. And another funny thing is that I can't highlight that new <div>s' content with a mouse in browser.
Looks like it doesn't take new innerHTML into account, and I can't understand why.
Do I do something wrong? (I certainly do, but what? Or, is that a FF bug/feature?)