¿Cómo se puede obtener el texto de una etiqueta div usando solo javascript (sin jQuery)?

92

Intenté esto pero mostrando "indefinido".

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

¿Hay alguna forma de obtener el valor usando Javascript simple sin jQuery?

javascript html

— comprar y
fuente

162

Probablemente quieras probar en textContentlugar de innerHTML.

Dado innerHTMLdevolverá el contenido DOM como un Stringy no exclusivamente el "texto" en el div. Está bien si sabe que divcontiene solo texto, pero no es adecuado para todos los casos de uso. Para esos casos, probablemente tendrá que usar en textContentlugar deinnerHTML

Por ejemplo, considerando el siguiente marcado:

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

Obtendrá el siguiente resultado:

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

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

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

Consulte MDN para obtener más detalles:

— dhar
fuente

.textContentno es compatible con IE8 y versiones anteriores, lo que hace que sea algo difícil de usar.

— Blender

2

Cierto. Indead, innerHTMLno devuelve solo el contenido de texto como se solicita en la pregunta. Implementaría una solución basada en la .textContentdetección de características con un respaldo para <IE9

— dhar

4

Aunque es una pregunta más antigua, .textContent es la respuesta más apropiada para el mundo actual.

— Donovan

Esto me ayuda mucho más. Muchas gracias.

— LogoS

9

Debido a textContentque no es compatible con IE8 y versiones anteriores, aquí hay una solución:

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

innerText funciona en IE.

— oabarca
fuente

0

Puede usar innerHTML(luego analizar el texto de HTML) o usar innerText.

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

console.log(textContentWithHTMLTags, textContent);

innerHTMLy innerTextes compatible con todos los navegadores (excepto FireFox <44) incluido IE6 .

— Abdus
fuente

0

En realidad, no necesita llamar a la document.getElementById()función para acceder a su archivo div.

Puede usar esto objectdirectamente por id:

text = test.textContent || test.innerText;
alert(text);

— Nick Wynther
fuente