Get Outside Inner HTML

Most web developers know about innerHTML. Some will say not to use it, because it is a Microsoft invention. I kind of agree; it is ugly and not very DOM, but it gets shit done on pretty much every browser out there. Which is more than I can say for some of the DOM functions I’ve attempted.

So based on it’s adoption across many browsers innerHTML has earned some street cred. There is also a property out there that is related to innerHTML. It is innerHTML’s retarded cousin. The outerHTML property has the handy ability to get all the innerHTML and the node that is containing it. In IE only. Hence, retarded cousin. I think it is a pretty useful thing, but other browsers don’t support it. I found this solution in a 4 post forum thread and I thought it was a worth a repost. This prototype extends HTMLElement adding custom functionality that works like outerHTML does across the other browsers out there.

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);
});