Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie erhalte ich Textinhalte aus einem Div-Element mit einfachem JavaScript?

Barbara Streisand
Freigeben: 2024-10-18 21:12:30
Original
621 Leute haben es durchsucht

How to Get Text Content from a Div Element Using Plain JavaScript?

Textinhalt aus einem Div-Element mit einfachem JavaScript abrufen

Bei Ihrem Versuch, den Text innerhalb eines Div mithilfe der Eigenschaft „value“ abzurufen , Sie sind auf ein Problem gestoßen, bei dem „undefiniert“ zurückgegeben wurde. Um den Textinhalt erfolgreich mit reinem JavaScript zu extrahieren, können Sie den folgenden Ansatz verwenden:

Die Eigenschaft „value“ wird hauptsächlich mit Eingabeelementen und nicht mit div-Elementen verwendet. Um auf den Textinhalt eines Div zuzugreifen, sollten Sie entweder die Eigenschaften „innerHTML“ oder „textContent“ nutzen.

Verwendung der Eigenschaft „innerHTML“:

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}
Nach dem Login kopieren

Dieser Ansatz ruft das Ganze ab Inhalt innerhalb des Div, einschließlich aller HTML-Tags. Wenn Ihr Div jedoch nur Text enthält, ist diese Methode geeignet.

Erwägen Sie alternativ die Verwendung der Eigenschaft „textContent“:

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}
Nach dem Login kopieren

Die Eigenschaft „textContent“ gibt ausschließlich den darin enthaltenen Textinhalt zurück das div, mit Ausnahme aller HTML-Tags. Diese Option ist besonders nützlich, wenn es um Divs geht, die gemischte Inhalte enthalten können.

Bedenken Sie beispielsweise den folgenden HTML-Code:

<div id="test">
  Some <span class="foo">sample</span> text.
</div>
Nach dem Login kopieren

Die Verwendung der Eigenschaft „innerHTML“ gibt Folgendes zurück:

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some <span class="foo">sample</span> text."
Nach dem Login kopieren

Die Verwendung der Eigenschaft „textContent“ führt jedoch zu Folgendem:

textContent = node.textContent;
// textContent = "Some sample text."
Nach dem Login kopieren

Weitere Details und Verwendungsbeispiele finden Sie in der umfassenden Dokumentation von MDN:

  • [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
  • [innerHTML](https://developer.mozilla.org /en-US/docs/Web/API/Element/innerHTML)

Das obige ist der detaillierte Inhalt vonWie erhalte ich Textinhalte aus einem Div-Element mit einfachem JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage