Modify the DOM?

gustaf · September 19th, 2007, 05:48 PM

Hi
I want 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:

HTML Code:

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

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

Any help would be appreciated.