Die äußere Eigenschaft in JavaScript

Manchmal müssen Entwickler den Quellcode eines Elements durch HTML-formatierte Text ersetzen oder auf die Laufzeit auf den Quellcode eines Elements zugreifen. Verwenden Sie zu diesem Zweck die äußere Eigenschaft, die dem Element ähnlich ist.Innerhtml. Der Hauptunterschied zwischen diesen beiden Eigenschaften besteht darin, dass der Innerhtml ohne HTML -Tags auf den einfachen Textinhalt eines Elements zugreift, während die äußere HTML -Eigenschaft verwendet werden sollte, wenn Sie HTML -Tags benötigen.

Diese Studie erklärt die äußere Eigenschaft in JavaScript.

Was ist die äußere Eigenschaft in JavaScript??

Der "OuterhtmlIst die JavaScript -Eigenschaft der DOM -Schnittstelle, die die HTML -Komponente des Elements liefert. Zusammen mit dem Text umfasst es auch die vollständige HTML -Struktur des Elements, einschließlich der Eröffnungs- und Schluss -Tags. Darüber hinaus können Sie durch die Verwendung der Oterhtml -Eigenschaft auf die HTML -Struktur des Elements zugreifen oder ändern.

So verwenden Sie die äußere Eigenschaft in JavaScript?

Befolgen Sie die angegebene Syntax, um den HTML -Inhalt mithilfe der Oterhtml -Eigenschaft zu erhalten:

Element.Outerhtml

Die folgende Syntax wird zum Festlegen des HTML -Inhalts mithilfe der äußerenhtml -Eigenschaft verwendet:

Element.oberHtml = htmlstring;

Beispiel 1: Holen Sie sich die HTML -Struktur mithilfe der Oterhtml -Eigenschaft

Im folgenden Beispiel erhalten wir den Inhalt des Elements mithilfe der Oterhtml -Eigenschaft. Hier werden wir zuerst eine "erstellen"div”Element Verwenden von HTML -Tag und zuweisen Sie eine ID“divDas enthält mehrere Elemente, einschließlich einer Überschrift, Etikett und Schaltfläche. Mit der Taste befindet sich ein Onclick -Ereignis, mit dem die definierte Funktion namens “aufgerufen wirdGetContentByouterhtml ()”Um die vollständige Struktur des HTML -Elements zu zeigen:

Willkommen bei der = "Farbe: rot"> LinuxHint.

Es ist die beste = "Farbe: grün"> Website zu lernen und zu polieren, Ihre = "Farbe: Grün"> Fähigkeiten!


Klicken Sie hier!

Als nächstes definieren Sie die “GetContentByouterhtml ()Funktion, die auf der “auslöst“ONCLICK" Fall. Es wird den Inhalt des DIV -Elements einschließlich aller Tags angezeigt. In der Funktion werden wir zuerst die “übergeben“divID des Containers zum "GetElementById ()Methode als Argument und Zeigen Sie dann den Inhalt des Elements in der Alert () -Methode an, indem Sie die äußere HTML -Eigenschaft aufrufen:

Funktion getContentByouterhtml ()
var getCont = Dokument.GetElementById ("Div");
alert ("äußere html: \ n" + getCont.äußerehtml);

Die Ausgabe zeigt die vollständige Struktur des Elements einschließlich seiner untergeordneten Elemente:

Beispiel 2: Setzen und erhalten Sie die HTML -Struktur mithilfe der Oterhtml -Eigenschaft

In diesem Beispiel setzen wir einige Inhalte auf der DOM mithilfe der JavaScript -äußere Eigenschaft und erhalten dann die vollständige Struktur des angegebenen Elements.

Hier erstellen wir zwei Schaltflächen, einer ist “Satz!"Das wird die" auslösen "setouterhtml ()"Funktion auf einem"ONCLICKEreignis und legt einige Inhalte auf der DOM fest, und die zweite Taste ist "ErhaltenDas wird die vollständige Struktur des Elements erhalten, indem sie das auslösenGetContentByouterhtml ()Funktion:

Setzen Sie den Inhalt als äußerehtml fest:

Satz!
Erhalten

Definieren Sie in JavaScript -Datei zwei Funktionen, die “setouterhtml ()" und das "GetContentByouterhtml ()”. Legen Sie den Inhalt in SetoUterHtml () -Funktion mit

Tag unter Verwendung der Set der Syntax der Set Oterhtml als untergeordnetes Element des Elements:

Funktionsetouterhtml ()
var setCont = dokument.GetElementById ("set");
setcont.oberHtml = "

Es ist die beste Website, um Ihre Fähigkeiten zu lernen und zu polieren!

";

Wenn Sie dann in GetContentByouterhtml () -Funktion die vollständige Struktur des Elements verwenden, verwenden Sie die Eigenschaftssyntax von GET Outerhtml:

Funktion getContentByouterhtml ()
var getCont = Dokument.GetElementById ("Div");
Alarm (getCont.äußerehtml);

Ausgang

Wir haben alle wesentlichen Informationen über Oterhtml JavaScript -Eigenschaft behandelt.

Abschluss

Der "OuterhtmlIst die JavaScript -Eigenschaft der DOM -Schnittstelle, die die vollständige HTML. Es ähnelt der innerhtml. In dieser Studie haben wir die äußere Eigenschaft in JavaScript erklärt.