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

64

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

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

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

Теги:

3 ответа

121
Лучший ответ

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

Данный 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:

Поделиться
  • 0
    .textContent не поддерживается в IE8 и ниже, что затрудняет его использование.
  • 2
    Правда. Indead, innerHTML не возвращает только текстовое содержимое, запрошенное в вопросе. Я бы реализовал решение, основанное на .textContent функции .textContent с .textContent для <IE9
Показать ещё 2 комментария
6

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

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

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

Поделиться
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.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню