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.

IE11 doesn't support insertAdjacentHTML on SVG elements

Edge doesn't support insertAdjacentHTML on SVG elements, too

the svg element in ios version <= 10.2 doesn't support insertAdjacentHTML.

For IE 11 you should change
ref.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "_") to ref.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "svg"),
and import innersvg-polyfill for .innerHTML working.
Maybe helpfull this:
https://github.com/comindware/core-ui/blob/2.1/release/src/services/EdgeService.ts
https://github.com/comindware/core-ui/blob/2.1/release/src/services/IEService.ts