Holen Sie sich den Text eines HTML -Elements mit JavaScript
Manchmal müssen Entwickler den Text eines HTML -Elements festlegen oder erhalten, um verschiedene Aufgaben auszuführen. Um den Text eines Elements zu erhalten, verwenden Sie die “TextinhaltEigentum mit Innerhtml und InnerText -Eigenschaften. Das Element.TextContent ist eine DOM Level 3 -Funktion, die in allen Browsern vollständig unterstützt wird.
In diesem Artikel wird das Verfahren zum Erhalten des Textes eines Elements mit JavaScript erläutert.
So erhalten Sie den Text eines HTML -Elements mit JavaScript?
Verwenden Sie die folgenden Ansätze, um den Text eines Elements mit JavaScript zu erhalten:
- TextContent -Eigenschaft mit Innerhtml -Eigenschaft
- textbezogene Eigenschaft mit InnerText -Eigenschaft
Methode 1: Erhalten Sie den Text eines HTML
Der Textinhalt des angegebenen Knotens und seiner Nachkommen kann mit der “festgelegt oder zurückgegeben werdenTextinhalt”Attribut. Es gibt eine Verkettung des Textinhalts jedes Kinderknotens zurück. Eine leere Zeichenfolge wird jedoch als Ausgabe zurückgegeben, falls das Element leer ist.
Syntax
Folgen Sie der angegebenen Syntax, um die zu verwenden “TextinhaltEigenschaft, um den Text des HTML -Elements zu erhalten:
Element.Textinhalt
Beispiel
Im folgenden Beispiel erstellen wir eine ungeordnete Liste mit untergeordneten Elementen
- Html
- CSS
- JavaScript
- Knoten JS
- Reagieren
Erstellen Sie eine Schaltfläche und fügen Sie eine an "anONCLICK"Ereignis, das die definierten auslöst"getText ()" Methode:
Erstellen Sie einen Absatz, indem Sie ihm eine ID zuweisen, in der die Ausgabe angezeigt wird:
Nach der Ausführung des oben genannten HTML -Codes ist die Ausgabe wie folgt:
In einer JavaScript -Datei erhalten Sie nun zuerst das Element mit der “GetElementById ()Methode und dann seinen Text mit Hilfe des “abrufenTextinhalt"Eigenschaft und speichern Sie es in einer Variablen"Text”. Dann rufen Sie das an "InnerhtmlEigenschaft, die den Text auf dem spezifischen Feld in einer einzelnen Zeile mit Leerzeichen druckt.
Funktion getText ()
var text = dokument.GetElementById ("Liste").Textinhalt;
dokumentieren.GetElementById ("Text").Innerhtml = Text;
Die entsprechende Ausgabe ist wie folgt:
Schauen wir uns die zweite Methode an!
Methode 2: Nutzen Sie den Text eines HTML
Verwenden Sie die auf einer Webseite wie in einem Listenformular gezeigten Text in demselben Format, um die “zu erhaltenInnerTextEigentum mit dem "Textinhalt" Eigentum.
Syntax
Die folgende Syntax wird für die InnerText -Eigenschaft verwendet:
Element.InnerText
Beispiel
In der JavaScript -Datei zunächst eine Funktion definieren “getText ()”Das wird auf der Schaltfläche klicken, um den Textinhalt der nicht ordnungsgemäßen Elementliste zu erhalten:
Funktion getText ()
var text = dokument.GetElementById ("Liste").Textinhalt;
dokumentieren.GetElementById ("Text").InnerText = Text;
Ausgang
Das obige GIF bedeutet, dass das “InnerTextEigentum mit dem "TextinhaltEigenschaft erhält den Text eines HTML -Elements im Listenformat.
Abschluss
Verwenden Sie das „Text eines HTML -Elements, um den Text eines HTML -Elements zu erhalten“TextinhaltEigentum mit dem "Innerhtml" Und "InnerText" Eigenschaften. Die Innerhtml druckt den Text eines Elements in einer Inline -Reihenfolge, während der InnerText den Text im selben Format druckt. In diesem Artikel wurde das Verfahren zum Erhalten des Textes eines Elements mit JavaScript erläutert.