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.

Verwenden der Eigenschaft „innerHTML“:

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

Dieser Ansatz ruft den gesamten Inhalt innerhalb des div ab, 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);
}

Die Eigenschaft „textContent“ gibt ausschließlich den Textinhalt innerhalb des div zurück, 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:

  Some sample text.

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

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

htmlContent = node.innerHTML;
// htmlContent = "Some sample text."

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

textContent = node.textContent;
// textContent = "Some sample text."

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)