PDA

View Full Version : outerHTML with FireFox



cyshaw
Sep 6th, 2007, 03: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
Sep 6th, 2007, 04: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
Sep 6th, 2007, 07: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
Sep 7th, 2007, 04:18 PM
Guys,

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