setting outerHTML of an object in Mozilla

[martin_narg]

Hey guys, I'm having a problem with Mozilla/Firefox and a rich-text editor I am extending. Essentially I want to be able to change (or apply) a new style class to an element and then have the page dynamically update with this new style.

I have attached a snippet with the portion of relevent code, everything works in IE setting the outerHTML value of the relevant tag. In fact I grab the relevent tag in Firefoxas well - and can drag information from it - however I am requiring changing the tag type (from a h1 to a p if required) as well as applying a class.

I've tried a huge amount of variants - and have successfully used objParentNode.className = "myClass" to change the className string of the object *but* this change hasn't been represented on the screen.

I've not managed to get objParentNode.outerHTML to work in Firefox - but then again it's not throwing up any error messages when I try.

I was hoping someone might have a good idea on how to progress with this, indeed a snippet to fully have my cross-browser functionality would be much appreciated, and I'd include the usual merit in the code comments.


var strTag = 'p';
var strClass = 'small';

idocument.execCommand("formatblock", false, "<" + strTag + ">");
if(document.selection) {
var objParentNode = document.selection.createRange().parentElement();
objParentNode.outerHTML = '<' + strTag + ' class="' + strClass + '">' + objParentNode.innerHTML + '</' + strTag + '>';
}
else {
var objParentNode = theSelection.getRangeAt(0).startContainer; // objParentNode does indeed exist when checked here
var strMozVersionOfOuterHTML = '<' + strTag + ' class="' + strClass + '">' + objParentNode.nodeValue + '</' + strTag + '>';
//objParentNode.outerHTML = strMozVersionOfOuterHTML;
}


Many thanks

m_n

Edit: FYI The rich-text editor I am extending is themaninblue's widgeditor (http://www.themaninblue.com/experiment/widgEditor/ )

[Harry Armadillo]

Mozilla doesn't support outerHTML (for philosophical reasons).

You'll find some useful bits of code here (http://webfx.eae.net/dhtml/ieemu/htmlmodel.html) that will help you build DOM-based methods to accomplish your tasks.

[martin_narg]

very interesting, thankyou very much for your reply. I see essentially what I require doing is creating a new node then using this to replace the parentNodes' childNode (this).

Thanks again - a very useful answer.

m_n