How can I insert an element into a Text Node in a Chrome Extension

Question

Suppose I have the following HTML structure:

<p>你好,world</p>

And I have obtained the text node by querying :

var textNode = "你好,world" (Pseudocode, already obtained)

What I want to achieve is to insert an element into the TextNode ,like this:

<p>你好<button>Translate</button>,world</p>

I have tried to modify the textNode.nodeValue property ,but the browser still displays the original text instead of parsing it as an HTML element.

Here's the code I'am using to find the text node:

$('body :not(script)').contents().filter(function () {
    return this.nodeType === 3;
}).each(function () {
    if (this.nodeValue.match(/\b你好\b/g)) {
        //'this' is a TextNode
        //Then what can i do??
        //Modifying this.nodeValue doesn't work
        //Thanks a lot!
    }
})