outerHTML.js

// Implement the outerHTML property for browsers that don't support it. // Assumes that the browser does support innerHTML, has an extensible // Element.prototype, and allows getters and setters to be defined. (function() { // If we already have outerHTML return without doing anything if (document.createElement("div").outerHTML) return; // Return the outer HTML of the element referred to by this function outerHTMLGetter() { var container = document.createElement("div"); // Dummy element container.appendChild(this.cloneNode(true)); // Copy this to dummy return container.innerHTML; // Return dummy content } // Set the outer HTML of the this element to the specified value function outerHTMLSetter(value) { // Create a dummy element and set its content to the specified value var container = document.createElement("div"); container.innerHTML = value; // Move each of the nodes from the dummy into the document while(container.firstChild) // Loop until container has no more kids this.parentNode.insertBefore(container.firstChild, this); // And remove the node that has been replaced this.parentNode.removeChild(this); } // Now use these two functions as getters and setters for the // outerHTML property of all Element objects. Use ES5 Object.defineProperty // if it exists and otherwise fall back on __defineGetter__ and Setter__. if (Object.defineProperty) { Object.defineProperty(Element.prototype, "outerHTML", { get: outerHTMLGetter, set: outerHTMLSetter, enumerable: false, configurable: true }); } else { Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter); Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter); } }());