Javascript outerHTML – ersetzt gesamte Elemente, auch sich selbst

outerHTML

outerHTML überschreibt das Element, während innerHTML alle inneliegenden Elemente, aber nicht das Element selber ersetzt.

Wenn auf dem Element Event Handler sitzen, löscht outerHTML auch die Event Handler.

Alles löschen

document.getElementById('clearOuter').onclick = function () {
   document.getElementById('outer').outerHTML = '';
}

Wird die outerHTML-Eigenschaft eines Elements als Setter benutzt und mit einem leeren String überschrieben, wird das Element aus dem DOM und auch aus dem Speicher entfernt.

console.log (document.getElementById("outer")) // gibt null zurück

innerHTML gibts quasi immer schon. outerHTML wird von den jüngeren Browsern unterstützt. Sowohl innerHTML als auch outerHTML eignen sich für schnelle Tests in der Konsole des Browsers, wenn komplexe Strukturen im DOM umgebaut werden.

console.log ('outer ' + outer)

Aber outerHTML ist gefährlicher, seltener nötig und schlechter komponierbar, darum wird es deutlich seltener eingesetzt als innerHTML.

box.outerHTML = "<section>Neu</section>";

Erzeugt

<section>Neu</section>

outerHTML zerstört Referenzen, so dass Variable auf tote Objekte zeigen können und EventListener verloren gehen. Das macht Code mit outerHTML fragil und fehleranfällig.

outerHTML als Wrapper

Weil outerHTML der Inhalt eines Elements mitsamt dem Element selbst ist, eignet sich outerHTML als Wrapper. Wenn ein Element oder ein ganzes Fragment z.B. in ein div-Element gepackt werden sollen:

Wrap in DIV

<style>
.wrapper { border:2px solid gainsboro }
</style>

<figure id="inner">
   <svg class="summer"><use xlink:href="#summer" /></svg>
   <div class="demo"><button id="wrap">Wrap in DIV</button></div>
</figure>

<script>
document.getElementById("wrap").onclick = function () {
   let inner = document.getElementById("inner");
   inner.outerHTML = "<div class='wrapper'>" + inner.outerHTML + "</div>";
}
</script>

Der Button wirkt allerdings kein zweites Mal – beim Ersetzen des Inhalts verliert outerHTML die Referenz für das button-Element – auch wenn der neu erzeugte Button genauso aussieht wie der ursprüngliche. outerHTML zerstört das Original-Element.

Sauberer funktioniert elem.replace() als Wrapper.

const wrapper = document.createElement("div");
wrapper.className = "wrapper";

el.replaceWith(wrapper);
wrapper.append(el);

Die Variable bleibt …

Wird ein Element E durch outerHTML geändert, bekommt die Variable E, die zuvor auf das Element gesetzt wurde, davon nichts mit.

let e = document.createElement("div");
let text = document.createTextNode("Ein bisschen Text muss sein");
e.appendChild(text);
document.getElementById("res").after(e);

e.outerHTML = "<div id='newtext'>Der etwas andere Text</div>";
console.log ("e innerHTML " + e.innerHTML);
console.log ("e getElementById " + document.getElementById("newtext").innerHTML);

[Log] e innerHTML Ein bisschen Text muss sein (outerhtml.html)
[Log] e getElementById Der etwas andere Text (outerhtml.html)