Why is innerHTML not yet standard

Javascript after, before, remove, replaceWith

Vanilla Javascript vs jQuery

Many of the convenient methods from jQuery have made their way into Vanilla Javascript - pure Javascript without libraries. If it weren't for IE11 ...

myElem.before ("text1", elem1, elem2, "text2")

While insertBefore only accepts a single element, before can contain multiple strings and elements (separated by commas).

If IE11 is to be supported, we have to stick to insert Before and the complicated call of replace Child and remove Child for some time ...

before / after

const img = document.createElement ("IMG"); img.addEventListener ("load", function () {const h4 = document.createElement ("H4"); h4.innerHTML = "Melon"; const para = document.createElement ("P"); para.innerHTML = "Many Kernels, green shell "; const thumb = document.createElement (" div "); thumb.appendChild (img); document.querySelector (". Card1 "). Before (h4, thumb, para," and refreshing in summer ") ;}); img.src = "melone.png";

Microsoft supports before (), nach() and replaceWith from Edge 17 (April 2018), but IE11 is still left out. WebReflection / dom4 is a polyfill for old browsers.

replaceWith / replaceNode

replace With () replaces an element with one or more elements and / text (remains text, no innerHTML that develops into elements).

Instead of replaceWith supports IE11 replaceNode. In doing so, all properties of the replaced element are removed.

IE11 only
gallaxy [i] .onclick = function () {let galaxy4 = document.getElementById ("i4"). cloneNode (true); this.replaceNode (galaxy4); }

The replacement node before the call to replaceNode () With cloneNode copy, because replaceNode postpones the replacement.

remove

elem.remove () removes the element from the DOM.

melon

donut

Plain and simple

elem.onclick = function () this.remove ()};

Not IE11, but included in the WebReflection / dom4 polyfill.

External sources