innerHTML，innerText，textContent

参考理解

https://www.e-learn.cn/content/html/1765240

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。

如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或(>), innerHTML 将这些字符分别返回为&, < 和 > ，使用Node.textContent 可获取一个这些文本节点内容的正确副本。

innerHTML会获取页面中html标签起始至标签结束中间的所有内容包括后代元素的html标签与其中的内容

通过innerHTML进行赋值会清空所选标签内的所有内容后在进行赋值，innerText与textContent均如此

正如其名称，innerHTML 返回 HTML 文本。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 XSS 攻击。

用 innerHTML 插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介，从而产生潜在的安全风险问题。

const name = "John";

// assuming 'el' is an HTML DOM element

el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";

el.innerHTML = name; // harmless in this case

尽管这看上去像 cross-site scripting 攻击，结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。

然而，有很多不依赖 <script> 标签去执行 JavaScript 的方式。所以当你使用innerHTML 去设置你无法控制的字符串时，这仍然是一个安全问题。例如：

const name = "<img src='x' onerror='alert(1)'>";

el.innerHTML = name; // shows the alert

基于这个原因，当插入纯文本时，建议不要使用 innerHTML 。取而代之的是使用 Node.textContent ，它不会把给定的内容解析为 HTML，它仅仅是将原始文本插入给定的位置。

textContent会获取所有元素的content，包括`<script>`和`<style>`,'<title>'元素内容,innerText不会获取`<script>`和`<style>`<title>元素内容

innerText最早是由IE引入的，并于2016年正式成为了HTML的标准，innerText 对IE的兼容性较好，textContent虽然作为标准方法但是只支持IE8+以上的浏览器，最新的浏览器，两个都可以使用，在 IE (小于等于IE11的版本)中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）

innerText受 CSS 样式的影响，会引起reflow，textContent不会

innerText返回值会被格式化，每个元素内容独占一行，而textContent不会，源码是什么样子，提取的内容就是如何，可以理解为innerText根据页面可见元素内容提取元素内容，textContent根据源代码可见的元素内容提取以上内容

•innerText不会获取hidden元素的content，而textContent不会

归属区别

textContent 是 Node 对象的属性；
innerHTML 是 Element 对象的属性；
innerText 是 HTMLElement 对象的属性；

火狐不支持innerText，需要使用textContent，兼容代码案例

FireFox不支持InnerText的解决方法

<table>

　　<tr>

　　　　<td  onclick="getDetail(this)">zhangtongzct</td>

　　</tr>

</table>

　　通过点击table中td，获取td中的值，在一般浏览器，ie,360,谷歌中都支持innerText,但是火狐支持innText

火狐中要用textContent，所以代码我们应该这样写

        function getDetail(obj){

            var str= obj.innerText;

            if( str == null ) str = obj.textContent ; // 兼容火狐

            return str;

        }

巴特西

innerHTML，innerText，textContent

归属区别

最新文章

热门文章