Efficient outerHTML polyfill that doesn't use cloneNode(true)

outerHTML.js

/*
 * outerHTML.js
 *   Cross-browser full HTMLElement.outerHTML implementation.
 *
 * 2011-11-14
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

if (typeof document !== "undefined" && !("outerHTML" in document.createElementNS("http://www.w3.org/1999/xhtml", "_"))) {

(function(view) {
"use strict";

var
	  container = document.createElementNS("http://www.w3.org/1999/xhtml", "_")
	, elem_proto = (view.HTMLElement || view.Element).prototype
	, xml_serializer = new XMLSerializer
	, outerHTML_getter = function() {
		var
			  node = this
			, html
		;
		if (document.xmlVersion) {
			return xml_serializer.serializeToString(node);
		} else {
			container.appendChild(node.cloneNode(false));
			html = container.innerHTML.replace("><", ">" + node.innerHTML + "<");
			container.innerHTML = "";
			return html;
		}
	}
	, outerHTML_setter = function(html) {
		var
			  node = this
			, parent = node.parentNode
			, child
		;
		if (parent === null) {
			DOMException.code = DOMException.NOT_FOUND_ERR;
			throw DOMException;
		}
		container.innerHTML = html;
		while ((child = container.firstChild)) {
			parent.insertBefore(child, node);
		}
		parent.removeChild(node);
	}
;

if (Object.defineProperty) {
	var outerHTML_prop_desc = {
		  get: outerHTML_getter
		, set: outerHTML_setter
		, enumerable: true
		, configurable: true
	};
	try {
		Object.defineProperty(elem_proto, "outerHTML", outerHTML_prop_desc);
	} catch (ex) { // IE 8 doesn't support enumerable:true
		if (ex.number === -0x7FF5EC54) {
			outerHTML_prop_desc.enumerable = false;
			Object.defineProperty(elem_proto, "outerHTML", outerHTML_prop_desc);
		}
	}
} else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) {
	elem_proto.__defineGetter__("outerHTML", outerHTML_getter);
	elem_proto.__defineSetter__("outerHTML", outerHTML_setter);
}

}(self));

}

T-shirt idea: “0x7FF5EC54 is just a fancy way of saying 2146823252.”

T-shirt idea: “0x7FF5EC54 is just a fancy way of saying 2146823252.”

Wouldn't it be more efficient if you cached container instead of creating a new element every time?

Wouldn't it be more efficient if you cached container instead of creating a new element every time?

Not every element is in the same document, as you can see by my use of node.ownerDocument.createElement.

Not every element is in the same document, as you can see by my use of node.ownerDocument.createElement.

Have you tested this in a recent version of Firefox? FF 6.0 on OS X seems to be removing the node without replacing it: http://jsfiddle.net/M27UA/

Have you tested this in a recent version of Firefox? FF 6.0 on OS X seems to be removing the node without replacing it: http://jsfiddle.net/M27UA/

Fixed. For some reason I had parent.removeChild(child); in there, and I probably should have at least tested the script once I added the setter :P

Fixed. For some reason I had parent.removeChild(child); in there, and I probably should have at least tested the script once I added the setter :P

Nice, thanks for the quick fix!

Nice, thanks for the quick fix!