insertAdjacentHTML polyfill

insertAdjacentHTML.js

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

if (self.document && !("insertAdjacentHTML" in document.createElementNS("http://www.w3.org/1999/xhtml", "_"))) {

HTMLElement.prototype.insertAdjacentHTML = function(position, html) {
	"use strict";

	var
		  ref = this
		, container = ref.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "_")
		, ref_parent = ref.parentNode
		, node, first_child, next_sibling
	;

	container.innerHTML = html;

	switch (position.toLowerCase()) {
		case "beforebegin":
			while ((node = container.firstChild)) {
				ref_parent.insertBefore(node, ref);
			}
			break;
		case "afterbegin":
			first_child = ref.firstChild;
			while ((node = container.lastChild)) {
				first_child = ref.insertBefore(node, first_child);
			}
			break;
		case "beforeend":
			while ((node = container.firstChild)) {
				ref.appendChild(node);
			}
			break;
		case "afterend":
			next_sibling = ref.nextSibling;
			while ((node = container.lastChild)) {
				next_sibling = ref_parent.insertBefore(node, next_sibling);
			}
			break;
	}
};

}

Thank you. I found this to be handy for old versions of Firefox.

If you need this for SVG, modify HTMLElement to SVGSVGElement and the namespace to http://www.w3.org/2000/svg inside the function.

I also needed to replace the starting conditional to this(perhaps there is a better way though):

if(!SVGSVGElement.prototype.insertAdjacentHTML) {

Why would anyone need this anymore

Why would anyone need this anymore

I'm a bit late, but (believe it or not) it's because of a very tiny minority that still use browsers that don't support insertAdjacentHTML.