Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Mit den DOM-Eigenschaften innerHTML und outerHTML können Sie Inhalte auf einer Webseite lesen und schreiben. Sie können sie verwenden, um Markup abzurufen oder Änderungen daran vorzunehmen, und die beiden sind sich in vielerlei Hinsicht ähnlich. Aber es gibt einen wesentlichen Unterschied.

Wenn Sie mit dem DOM arbeiten, verwenden Sie innerHTML und outerHTML ziemlich unterschiedlich. Erfahren Sie anhand praktischer Beispiele, wie Sie diese beiden Eigenschaften nutzen können.

Was ist inneres HTML?

Die innerHTML-Eigenschaft ist Teil von der Dom und Sie können über JavaScript darauf zugreifen. Sie können es verwenden, um den Inhalt eines Elements abzurufen oder festzulegen. Dieser Inhalt schließt das eigene Tag des Elements aus und enthält nur das Markup, das die untergeordneten Elemente des Elements in Form einer Zeichenfolge darstellt.

instagram viewer

Betrachten Sie dieses Codebeispiel:

<html>
<Körper>
<PAusweis="meinP">Ich bin ein Absatz.P>


<Skript>
dokumentieren.getElementById("meinP").innerHTML = "Hallo Welt";
Skript>
Körper>


html>

In Ihrem Browser sehen Sie einen Standardabsatz mit dem Ersatztext, etwa so:

Die innerHTML-Eigenschaft wählt und ändert den Inhalt derElement in diesem Beispiel.

Was ist äußeres HTML?

Die Eigenschaft outerHTML ist in vielerlei Hinsicht wie innerHTML. Sie können es verwenden, um den Inhalt eines ausgewählten Elements abzurufen oder festzulegen. Es legt jedoch auch das Markup fest, das das Element selbst darstellt. Dazu gehören das öffnende Tag, alle Eigenschaften und – sofern relevant – das schließende Tag.

Sehen Sie sich das vorherige Beispiel noch einmal an, um zu sehen, wie sich outerHTML unterscheidet:

<html>
<Körper>
<PAusweis="meinP">Ich bin ein Absatz.P>


<Skript>
dokumentieren.getElementById("meinP").outerHTML = "
Dieser H1 ersetzt einen Absatz.
"
Skript>
Körper>
html>

In Ihrem Browser sollten Sie so etwas sehen:

In diesem Beispiel ändert die Eigenschaft outerHTML die P Element in ein h1 Element.

Kennen Sie den Unterschied und wann Sie diese Eigenschaften verwenden sollten

Die DOM-Eigenschaften innerHTML und outerHTML haben viele Ähnlichkeiten, aber einen wesentlichen Unterschied. Die innerHTML-Eigenschaft erfasst den HTML-Inhalt eines Elements. Im Gegensatz dazu erfasst die Eigenschaft outerHTML den HTML-Code, der das Element selbst und seinen Inhalt darstellt.

Sie können diese Eigenschaften verwenden, um HTML-Inhalte über das DOM zu lesen und zu schreiben. Das DOM wird während Ihres gesamten JavaScript-Entwicklungsprozesses ein gemeinsames, wichtiges Konzept sein.