如何只使用 javascript (不使用 jQuery)获取 div 标记的文本

我试了这个，但显示“未定义”。

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

有没有什么方法可以使用简单的 Javascript no jQuery 来获得这个值！

275320 次浏览
小开
最佳答案

You'll probably want to try textContent instead of innerHTML.

Given innerHTML will return DOM content as a String and not exclusively the "text" in the div. It's fine if you know that your div contains only text but not suitable if every use case. For those cases, you'll probably have to use textContent instead of innerHTML

For example, considering the following markup:

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

You'll get the following result:

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


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


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

See MDN for more details:

小开

Because textContent is not supported in IE8 and older, here is a workaround:

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

innerText does work in IE.

小开

You can use innerHTML(then parse text from HTML) or use innerText. 

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


console.log(textContentWithHTMLTags, textContent);

innerHTML and innerText is supported by all browser(except FireFox < 44) including IE6.

小开

Actually you dont need to call document.getElementById() function to get access to your div.

You can use this object directly by id:

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

提交答案