Jak uzyskać tekst znacznika DIV, używając tylko javascript (bez jQuery)


92

Próbowałem tego, ale pokazuję „undefined”.

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

Czy istnieje sposób, aby uzyskać wartość za pomocą prostego JavaScript no jQuery Please!

Odpowiedzi:


162

Prawdopodobnie będziesz chciał spróbować textContentzamiast innerHTML.

Podane innerHTMLzwróci zawartość DOM jako, Stringa nie wyłącznie „tekst” w div. W porządku, jeśli wiesz, że twój divzawiera tylko tekst, ale nie jest odpowiedni w każdym przypadku użycia. W takich przypadkach prawdopodobnie będziesz musiał użyć textContentzamiastinnerHTML

Na przykład, biorąc pod uwagę następujące znaczniki:

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

Otrzymasz następujący wynik:

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

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

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

Więcej informacji w MDN:


.textContentnie jest obsługiwany w IE8 i niższych, co sprawia, że ​​jest nieco trudny w użyciu.
Blender

2
Prawdziwe. Nieumarły, innerHTMLnie zwraca tylko treści tekstowej zgodnie z żądaniem w pytaniu. Wdrożyłbym rozwiązanie oparte na .textContentwykrywaniu funkcji z rezerwą dla <IE9
dhar

4
Chociaż starsze pytanie, .textContent jest bardziej odpowiednią odpowiedzią na dzisiejszy świat.
Donovan

To pomaga mi dużo bardziej. Dziękuję Ci bardzo.
LogoS

9

Ponieważ textContentnie jest obsługiwany w IE8 i starszych, oto obejście:

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

innerText działa w IE.


0

Możesz użyć innerHTML(a następnie przeanalizować tekst z HTML) lub użyć innerText.

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

console.log(textContentWithHTMLTags, textContent);

innerHTMLi innerTextjest obsługiwany przez wszystkie przeglądarki (z wyjątkiem FireFox <44), w tym IE6 .


0

Właściwie nie musisz wywoływać document.getElementById()funkcji, aby uzyskać dostęp do swojego div.

Możesz tego użyć objectbezpośrednio przez id:

text = test.textContent || test.innerText;
alert(text);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.