PDA

View Full Version : outerHTML with FireFox



cyshaw
09-06-2007, 04:29 PM
I am using the outerHTML property to modify the HTML of existing elements in a web page in Internet Explorer. But same outerHTML property is not working in firefox browser, Anybody can tell me an alternative for outerHTML property in firefox.

The outHTML in IE seemed to replace the element with the new HTML text, which is what I wanted. InnerHTML does not replace the element, but inserts the HTML text inside the element, which I do not want.

liorean
09-06-2007, 05:31 PM
outerHTML is iew only, and really shouldn't be used. Saf and moz don't support it. I don't know if op supports it, but even if they do, that's probably limited to iew spoofing mode.


As for equivalent functionality: You can create a new element, set the contents of that element (through the DOM or through innerHTML) and then replace the old element with the new element.
function replaceContents(oldElement,newElementName,newContent){
var
newElement=document.createElement(newElementName);
newElement.innerHTML=newContent;
oldElement.parentNode.replaceChild(newElement,oldElement);
}

jkd
09-06-2007, 08:43 PM
Not tested, but something like this should emulate the behavior completely. I'm a little uneasy about it, but every other browser implements outerHTML, and any new browser probably would as well.



HTMLElement.prototype.__defineGetter__("outerHTML", function() {
var span = document.createElement("span"); span.appendChild(this.cloneNode(true));
return span.innerHTML;
});

HTMLElement.prototype.__defineSetter__("outerHTML", function(html) {
var range = document.createRange();
this.innerHTML = html;
range.selectNodeContents(this);
var frag = range.extractContents();
this.parentNode.insertBefore(frag, this);
this.parentNode.removeChild(this);
});

cyshaw
09-07-2007, 05:18 PM
Guys,

Thanks for your help! The solutions worked.
:thumbsup: