Как получить текст тега div, используя только javascript (без jQuery)

92

Я пробовал это, но показывал "undefined".

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

Есть ли способ получить значение с помощью простого Javascript без jQuery Пожалуйста!

Agurchand
источник

Ответы:

162

Возможно, вы захотите попробовать textContentвместо innerHTML.

Given innerHTMLвернет содержимое DOM в виде, Stringа не только «текст» в div. Это нормально, если вы знаете, что ваш divсодержит только текст, но не подходит для всех случаев использования. В этих случаях вам, вероятно, придется использовать textContentвместоinnerHTML

Например, учитывая следующую разметку:

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

Вы получите следующий результат:

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

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

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

Подробнее см. MDN:

дхар
источник
.textContentне поддерживается в IE8 и ниже, что затрудняет его использование.
Blender
2
Правда. Indead innerHTMLне возвращает только текстовое содержимое, как указано в вопросе. Я бы реализовал решение, основанное на .textContentобнаружении функций, с запасным вариантом для <IE9
dhar
4
Хотя это более старый вопрос, .textContent является более подходящим ответом для современного мира.
Донован
Это помогает мне намного больше. Большое спасибо.
LogoS
9

Поскольку textContentне поддерживается в IE8 и более ранних версиях, существует обходной путь:

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

innerText работает в IE.

Oabarca
источник
0

Вы можете использовать innerHTML(затем проанализировать текст из HTML) или использовать innerText.

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

console.log(textContentWithHTMLTags, textContent);

innerHTMLи innerTextподдерживается всеми браузерами (кроме FireFox <44), включая IE6 .

Абдус
источник
0

На самом деле вам не нужно вызывать document.getElementById()функцию, чтобы получить доступ к вашему div.

Вы можете использовать это objectнапрямую id:

text = test.textContent || test.innerText;
alert(text);
Ник Винтер
источник