Wie kann man den Text eines div-Tags nur mit Javascript (kein jQuery) abrufen?

91

Ich habe es versucht, aber "undefiniert" angezeigt.

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

Gibt es eine Möglichkeit, den Wert mit einfachem Javascript zu erhalten? No jQuery Please!

agurchand
quelle

Antworten:

159

Sie werden es wahrscheinlich versuchen wollen, textContentanstatt innerHTML.

Gegeben innerHTMLwird DOM-Inhalt als Stringund nicht ausschließlich als "Text" in der zurückgegeben div. Es ist in Ordnung, wenn Sie wissen, dass Ihr divText nur enthält, aber nicht für jeden Anwendungsfall geeignet ist. In diesen Fällen müssen Sie wahrscheinlich textContentanstelle von verwendeninnerHTML

Betrachten Sie beispielsweise das folgende Markup:

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

Sie erhalten folgendes Ergebnis:

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

htmlContent = node.innerHTML,
// htmlContent = "Some <span class="foo">sample</span> text."

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

Weitere Informationen finden Sie unter MDN:

dhar
quelle
.textContentwird in IE8 und niedriger nicht unterstützt, was die Verwendung etwas erschwert.
Blender
2
Wahr. Indead, innerHTMLgibt nicht nur den in der Frage angeforderten Textinhalt zurück. Ich würde eine Lösung implementieren, die auf .textContentFeature-Erkennung mit einem Fallback für <IE9
dhar
4
Obwohl es sich um eine ältere Frage handelt, ist .textContent die geeignetere Antwort für die heutige Welt.
Donovan
Das hilft mir viel mehr. Vielen Dank.
Logos
9

Da textContentdies in IE8 und älteren Versionen nicht unterstützt wird, finden Sie hier eine Problemumgehung:

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerText funktioniert im IE.

oabarca
quelle
0

Sie können verwenden innerHTML(dann Text aus HTML analysieren) oder verwenden innerText.

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTMLund innerTextwird von allen Browsern (außer FireFox <44) einschließlich IE6 unterstützt .

Abdus
quelle
0

Eigentlich müssen Sie die document.getElementById()Funktion nicht aufrufen , um Zugriff auf Ihre zu erhalten div.

Sie können dies objectdirekt verwenden durch id:

text = test.textContent || test.innerText;
alert(text);
Nick Wynther
quelle