I have a web page that calls a Web Service. The Web Service returns HTML. This HTML need to be updated in the web page. This is a fairly easy process in IE: obj.outerHTML = new HTML. But, I also need to get this to work in Firefox. At first I had a difficult time creating a solution, but after a little Googling and understanding range and createContexualFragment the pieces started to fall together. This is what I came up with..
function
SetOuterHTML(newHtml, obj) {
if (obj.outerHTML) {
obj.outerHTML = newHtml;
}
else{
var r = obj.ownerDocument.createRange();
r.setStartBefore(obj);
var df = r.createContextualFragment(newHtml);
obj.parentNode.replaceChild(df, obj);
}
}
Resources:
How to read inner/outerHTML with NN6?
Introduction to Range
The Four Different inner/outer text/html Combinations
InnerHTML for Mozilla(See "View the entire Source" at bottom of page)
createContextualFragment( )
range.createContextualFragment
range