Instantly share code, notes, and snippets.

Embed
What would you like to do?
insertAdjacentHTML polyfill
/*
* 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;
}
};
}
@stevengliebe

This comment has been minimized.

stevengliebe commented Mar 8, 2013

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

@rolandtoth

This comment has been minimized.

rolandtoth commented Apr 27, 2018

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) {
@SuperOP535

This comment has been minimized.

SuperOP535 commented May 20, 2018

Why would anyone need this anymore

@Legend-of-iPhoenix

This comment has been minimized.

Legend-of-iPhoenix commented Oct 31, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment