JavaScript/DOM/Element/outerHTML

Die Eigenschaft Element.outerHTML liest und speichert den Inhalt eines HTML-Elements inklusive des Elements selbst (im Gegensatz zu innerHTML. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert.

Syntax

const content = element.outerHTML;

• Der gesamte Inhalt von element inklusive element wird der Konstanten content zugewiesen.

element.outerHTML = content;

• Das Element wird durch den Wert von content ersetzt.

Anwendungsbeispiel

Beispiel ansehen …

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('show').addEventListener('click', showHTMLNode);
  document.getElementById('button').addEventListener('click', changeHTMLNode);
});

function showHTMLNode() {
  let absatz = document.getElementsByTagName('p')[0].outerHTML;
  document.getElementById('display').textContent = encodeURI(absatz);
}

function changeHTMLNode() {
  var neu = "<p class='absatz'>neuer <strong>starker</strong> Text</p>";
  document.getElementById('absatz').outerHTML = neu;
}

Das Beispiel enthält einen Textabsatz und zwei Buttons. Beim Anklicken des ersten Buttons wird die Funktion showHTMLNode() aufgerufen, die den outerHTML-Code des Absatzes URI-codiert ausgibt. Beim Anklicken des zweiten Buttons wird changeHTMLContent() aufgerufen. Diese Funktion weist dem Absatz mit der id="absatz" das neue Element mit dem zuvor in der Variablen neu definierten HTML-Code zu. Der Absatz ändert sich dann dynamisch und berücksichtigt dabei auch die HTML-Formatierung <strong>...</strong> beim neuen Inhalt des Elements.

Die Eigenschaft outerHTML sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button-Klicks oder mit einem setTimeout() von einigen Sekunden davor.

Empfehlungen

Im Hinblick auf Empfehlungen und Risiken gelten für outerHTML die gleichen Punkte wie für innerHTML.

Weblinks

• MDN: Element.outerHTML
• W3C: DOM Parsing and Serialization