InnerText -Eigenschaft in JavaScript | Erklärt

Die InnerText -Eigenschaft von JavaScript wird verwendet, um den Text in ein HTML -Element und seine Nachkommen zu erhalten oder festzulegen. Der InnerText hat ein ähnliches Arbeitsphänomen zu Innerhtml. Beide Eigenschaften manipulieren den Inhalt eines HTML -Elements, jedoch mit unterschiedlichen Aspekten. Der InnerText konzentriert sich auf den Textinhalt und die Innerhtml berücksichtigt den HTML -Inhalt eines Elements.

Dieser Artikel bietet einen Einblick in die InnerText -Eigenschaft, um die folgenden Ziele zu erreichen.

• Wie die InnerText -Eigenschaft in JavaScript funktioniert
• So verwenden Sie die InnerText -Eigenschaft in JavaScript
• Unterschied zwischen InnerText und Innerhtml

Wie die InnerText -Eigenschaft in JavaScript funktioniert

Die Arbeit von InnerText hängt von den folgenden Syntaxen ab.

Um den Text eines HTML -Elements zu erhalten:

Knoten.InnerText;

So setzen/aktualisieren Sie den Text eines HTML -Elements:

Knoten.InnerText = "Text"

In den obigen Syntaxen:

• Der Knoten bezieht sich auf das HTML -Element und all seine Nachkommen.
• Der Text repräsentiert den neuen Text, der anstelle des vorhandenen Textes aktualisiert oder festgelegt wird.

So verwenden Sie die InnerText -Eigenschaft in JavaScript

Die folgenden Beispiele demonstrieren die Verwendung des InnerText Eigenschaft in HTML.

Beispiel 1: Holen Sie sich den Text eines HTML -Elements

Wir haben dieses Beispiel veranschaulicht, um zu zeigen, wie der Text eines Elements mit InnerText erhalten werden kann. Eigentum.

Html

Das ist ein Beispiel von InnerText

Klicken Sie hier, um den InnerText zu erhalten

Im obigen Code ein Absatz (ID = ”P1„) Wird erstellt, der a enthält klein Tag und a stark Schild. Darüber hinaus wird eine GET () -Funktion auf dem Klick der aufgerufen Taste.

JavaScript

Funktion get ()
Alarm (Dokument.GetElementById ("P1").InnerText);

Eine Funktion namens erhalten() wird erstellt, der eine enthält Alarm Anweisung zur Anzeige des Textes eines Elements (ID = ”P1")).

Ausgang

Es wird beobachtet, dass der Text des Absatzes (id = ”P1“) Und alle seine Nachkommen (Spannweite und stark) werden angezeigt.

Beispiel 2: Aktualisieren Sie den Text eines HTML -Elements

Der nachstehend bereitgestellte HTML- und JS -Code unterstützen die Aktualisierung des Textes des Elements.

Html

Dies ist ein Beispiel für InnerText -Eigenschaft

Klicken Sie hier, um den InnerText zu aktualisieren

Der HTML -Code erstellt einen Absatz mit id = ”P1Und Schaltfläche, die die ausführt aktualisieren() Funktion auf seinem ONCLICK Eigentum.

JavaScript

Funktion update ()
dokumentieren.GetElementById ("P1").InnerText = "Der Text wurde aktualisiert!";

Der oben angegebene JavaScript -Code erstellt eine update () -Funktion, die die InnerText -Eigenschaft auf den Absatz mit id = anwendet. “P1“.

Ausgang

Aus der Ausgabe wird beobachtet, dass der Text des Absatzes auf neuen Text aktualisiert wurde.

Beispiel 3: Legen Sie den Text für ein HTML -Element fest

In diesem Beispiel wird der Text eines Elements in das andere Element platziert, und der folgende Code hilft dabei.

Html

Willkommen bei LinuxHint

Klicken Sie hier, um den InnerText festzulegen

Der HTML -Code enthält einen Absatz mit id = ”alt„, Eine Taste, um die auszulösen Satz() Funktion und eine Überschrift mit ID = “neu“.

JavaScript

Funktion set ()
dokumentieren.GetElementById ("neu").InnerText = Dokument.GetelementById ("alt").InnerText;

Der obige Code erhält den Text eines Absatzelements (ID = ”alt") Und weist diesen Text der Überschriftenelement zu (ID ="neu")).

Ausgang

Die obige Ausgabe zeigt, dass der Text des Absatzes (id = “alt”) Wird auf eine Überschrift eingestellt (id =“neu”)).

Unterschied zwischen InnerText und Innerhtml

Der InnerText Und Innerhtml kann Verwirrung in den Kopf setzen. Der InnerText berücksichtigt nur den Textinhalt, während die Innerhtml Funktionen zum HTML -Inhalt eines Elements, das auch die Tags enthalten kann. Dieser Abschnitt liefert den Unterschied zwischen InnerText und Innerhtml durch die Verwendung des folgenden Code.

Html

Willkommen zu LinuxHint

für InnerText
für Innerhtml

Der obige Code erstellt ein Absatz -Tag und zwei Schaltflächen. Der erste Knopf löst die aus Text() Funktion, während die zweite Funktion die ausführt html () Funktion.

JavaScript

functionText ()
Alarm (Dokument.GetElementById ("Text").InnerText);

functionHtml ()
Alarm (Dokument.GetElementById ("Text").Innerhtml);

Es werden zwei Funktionen erstellt, die die üben InnerText Und Innerhtml Eigenschaften auf einem Absatz id = ”Text“.

Ausgang

Es wird beobachtet, dass die Innerhtml zeigt die inneren Elemente, während die InnerText hat den Textinhalt nur abgerufen.

Abschluss

Mit der InnerText -Eigenschaft von JavaScript können Sie den Inhalt eines HTML -Elements abrufen oder aktualisieren/festlegen. Dieser Artikel zeigt verschiedene Syntaxen der InnerText -Eigenschaft von JavaScript mit Beispielen, die das Konzept besser vermitteln. Wenn Sie den Artikel durchlaufen, hätten Sie gelernt, den Text zu erhalten, den Text zu aktualisieren oder einen Text mit der InnerText -Eigenschaft von JavaScript auf ein HTML -Element festzulegen. Schließlich haben wir den Unterschied zwischen InnerText und Innerhtml vorgestellt, um das Konzept in Ihrem Kopf zu ebnen.