Modify the DOM?

Hi
I want a firefox plugin to send a selected text to the google translator (http://www.google.com/translate_t) and insert the translated text on the fly into the DOM of the page, so that it replaces the old text.
Now the problem: I only send the text to google translate and get a text back (without the tags) - but how do I keep the html-tags, so that when I insert the translated text into the DOM, it displays correctly?

For example you have "<div>Some text and <b>some bold</b> words.</div>". The user selects "Some text and some bold words.", it gets translated, and inserted back in as "Etwas Text und einige fette Wörter." But the tags are missing and it doesn't display correctly.

I do it this way:

var range = text.getRangeAt(0);
range.deleteContents();
newnode = document.createElement("a");
newnode.appendChild(document.createTextNode(translated_text));
range.insertNode(newnode);

HTML:

How can I overcome this and re-insert the tags in the right place?

Any help would be appreciated.

 

this is technically impossible.

how could you determine the position of the tags AFTER the text gets translated? there will be structural changes so it is impossible to insert the tags on their previous positions.