textContent与innerText用法简单介绍

由于标题中两个属性存在极大的浏览器兼容性问题，所以对它们的使用较少，一般都是用innerHTML来替代它们，当然并不能说innerHTML能够完全取代，下面就介绍一下标题中两个属性的用法。

下面以下面的结构为例:

[ 其他 ] 运行代码下载代码

<script>
<div id="content">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
</script>

一.innerText属性:

此属性可以设返回或者设置元素节点中的文本内容，无论文本位于子文档树中的什么位置。

在通过innerText读取值是，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来，例如:

[ 其他 ] 运行代码下载代码

<script>
content.textContent;
</script>

以上代码的值是:

[ 其他 ] 运行代码下载代码

<script>
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
</script>

由以上代码可以看出，文本进行拼接也保留了空白符和换行效果。

再来看一下设置节点元素中的文本内容:

[ 其他 ] 运行代码下载代码

<script>
content.textContent="<b>51前端</b>"
</script>

代码描述：textContent innerText。textContent与innerText用法简单介绍

下载全部收藏

171 228

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

522688

作品：1334 | 粉丝：44

关注

TA的相关作品 >>更多

热搜关键词

textContent与innerText用法简单介绍

JavaScript奇数行或偶数行源码实例

getAttribute()和setAttribute()用法简单介绍

js调用执行exe应用程序简单介绍

JavaScript商品价格打折源码下载

javascript事件触发函数指定时间执行简单介绍

js退出循环语句简单介绍