Javascript outerHTML – Element lesen und überschreiben

Javascript outerhtml vs innerhtml

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Sommer



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:

Sommer
<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>
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.

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)