Javascript outerHTML – Element lesen und überschreiben

outerHTML Element vs. innerHTML: HTML-Element lesen / überschreiben

outerHTML ist das HTML eines Elements mitsamt dem Element selber. outerHTML schließt also den Elementknoten (öffnendes und schließendes Tag) ein – das ist der Unterschied zur Eigenschaft innerHTML eines Elements, das aus dem HTML innerhalb der öffnenden und schließenden Tags besteht.

outerHTML

outerHTML überschreibt das Element, während innerHTML alle Kinder, 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.

Beispiel: 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>
let falling = document.querySelector(".falling");
let 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.

outer HTML