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.
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)
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:
<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.
CSS-Animation neu starten: Entfernen mit outHTML, Einsetzen mit innerHTML
CSS Keyframe-Animationen starten per se, wenn die Seite geladen ist. Bis die Seite wo weit gescrollt wurde wie hier, ist die Animation längst abgelaufen.
Der Button löscht das animierte Element mit outerHTML und setzt es mit innerHTML wieder ein.
<div class="wrap">
<div class="falling">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
</div>
</div>
<div><button id="play">Play</button></div>
const falling = document.querySelector(".falling");
const play = document.querySelector("#play");
play.addEventListener ("click", function () {
falling.outerHTML = "";
document.querySelector(".wrap").innerHTML =
'<div class="falling"><div class="f1"></div><div class="f2"></div><div class="f3"></div></div>';
falling = document.querySelector(".falling");
});
Die Referenz auf das .falling-Element muss nach dem erneuten Einsetzen mit innerHTML wieder aufgenommen werden (falling = document.querySelector(".falling")), denn das Löschen mit outerHTML löscht auch alle Referenzen auf das Element.
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)
