Como posso obter o texto de uma tag div usando apenas javascript (no jQuery)

94

Tentei fazer isso mas mostrando "indefinido".

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

Existe alguma maneira de obter o valor usando Javascript simples no jQuery Por favor!

agurchand
fonte

Respostas:

167

Você provavelmente vai querer tentar em textContentvez de innerHTML.

Dado innerHTMLretornará o conteúdo DOM como um Stringe não exclusivamente o "texto" no div. Tudo bem se você souber que divcontém apenas texto, mas não é adequado para todos os casos de uso. Para esses casos, você provavelmente terá que usar em textContentvez deinnerHTML

Por exemplo, considerando a seguinte marcação:

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

Você obterá o seguinte resultado:

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

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

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

Veja MDN para mais detalhes:

dhar
fonte
.textContentnão é compatível com o IE8 e inferior, o que o torna um tanto difícil de usar.
Blender
2
Verdadeiro. Indead, innerHTMLnão retorna apenas o conteúdo do texto conforme solicitado na pergunta. Eu implementaria uma solução baseada na .textContentdetecção de recursos com um substituto para <IE9
dhar
4
Embora seja uma pergunta mais antiga, .textContent é a resposta mais apropriada para o mundo de hoje.
Donovan,
Isso me ajuda muito mais. Muito obrigado.
LogoS
10

Como textContentnão é compatível com IE8 e anteriores, aqui está uma solução alternativa:

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

innerText funciona no IE.

oabarca
fonte
0

Você pode usar innerHTML(em seguida, analisar o texto do HTML) ou usar innerText.

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

console.log(textContentWithHTMLTags, textContent);

innerHTMLe innerTexté compatível com todos os navegadores (exceto FireFox <44), incluindo o IE6 .

Abdus
fonte
0

Na verdade, você não precisa chamar a document.getElementById()função para obter acesso ao seu div.

Você pode usar isso objectdiretamente por id:

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