JavaScript/DOM/Element/outerHTML

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

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.

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • Lesen, Schreiben / Read, Write

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[Bearbeiten]

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[Bearbeiten]

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

Weblinks[Bearbeiten]