How do I get HTML Markup for createRange() in Firefox

Question

I am currently using code similar to this:

try {
 // IE ONLY
 var theElement = "myElementName";
 window.frames[theElement].focus();
 var selection = window.frames[theElement].document.selection.createRange();
 alert ( selection.htmlText );  
} catch(e) {
 var selection = window.frames[theElement].document.getSelection();
 alert ( selection );       
}

As you can see, I am accessing a node from an iframe (no fun already). I am definitely in new territory here, so am sure there are more issues to arise, but right now, I am trying to get Firefox to give me the same result as IE.

In IE, I can access the HTML code of the selection by using the (apparently IE-only) htmlText property of the object returned by createRange(). What I am looking for is the Firefox equivalent to that (or a function that I can use to give me the same result).

Anyone know how to do this?

Answer 1

This works in Firefox 2 and later (untested in earlier versions):

var selection = window.frames[theElement].getSelection();
var range = selection.getRangeAt(0);
var div = document.createElement("div");
div.appendChild(range.cloneContents());
alert(div.innerHTML);