innerText , innerHTML , textContent
与innerText的区别
Internet Explorer 引入了 element.innerText
,目的是相似的,不过有下面几点不同之处:
textContent
会获取所有元素的内容,包括<script>
和<style>
元素,然而 IE 专有属性innerText
不会。innerText
会受样式的影响,它不返回隐藏元素的文本,但textContent
返回。- 由于
innerText
受 CSS 样式的影响,它会触发重排(reflow),但textContent
不会。
与innerHTML的区别
正如它的名字,innerHTML
返回
HTML
文本。很多时候,当需要往一个元素里面写文本的时候,人们使用
innerHTML,但其实应该使用
textContent,因为文本不会被解析为 HTML,所以它很可能在性能表现上会更好,同时还能够避免XSS攻击。
例子
// 给定如下HTML:
// <div id="divA">This is <span>some</span> text</div>
// 获得文本内容:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".
// 设置文本内容:
document.getElementById("divA").textContent = "This is some text";
// divA的HTML现在是这样的:
// <div id="divA">This is some text</div>
浏览器兼容性
- Desktop
- Mobile
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1+ | (Yes) | 9 | (Yes) | (Yes) |
[转]