Skip to content

Instantly share code, notes, and snippets.

@eligrey
Created October 10, 2011 18:06
Show Gist options
  • Save eligrey/1276030 to your computer and use it in GitHub Desktop.
Save eligrey/1276030 to your computer and use it in GitHub Desktop.
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
Copy link

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

@rolandtoth
Copy link

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
Copy link

Why would anyone need this anymore

@Legend-of-iPhoenix
Copy link

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.

@blackmambahk
Copy link

IE11 doesn't support insertAdjacentHTML on SVG elements

@PavelKoroteev
Copy link

Edge doesn't support insertAdjacentHTML on SVG elements, too

@MuYunyun
Copy link

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

@PavelKoroteev
Copy link

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

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