innerHTM 和 textContent

最新推荐文章于 2023-12-15 23:14:09 发布

jerisem

最新推荐文章于 2023-12-15 23:14:09 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

分类专栏： js DOM 文章标签： html5 javascript

本文链接：https://blog.youkuaiyun.com/jerisem/article/details/119383932

js DOM 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML中innerHTML与textContent的区别及使用方法。innerHTML用于获取或设置包含标签在内的元素内容，而textContent仅操作纯文本内容，不受HTML标签影响。文章通过示例展示了两者的不同之处，并提到了不同浏览器的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerHTML 是获取/设置 标签的内容

1、获取：是获取元素内的所有内容
<div class="one" id="box">我是div
    <span>我是一个span</span>
    <p>我是一个p</p>
</div>    
<script>
    let box = document.getElementById('box');
    console.log(box.innerHTML);
</script>
2、设置：会覆盖所有的内容。如果设置的内容包含了标签，会解析这个标签
box.innerHTML = '天生我才<b>必有用</b>;  //b标签会被解析，‘必有用’会变成粗体

textContent 是获取/设置 文本的内容

1、获取：是获取元素内的所有文本（包括自己的文本和后代所有元素的文本）
<div class="one" id="box">我是div
    <span>我是一个span</span>
    <p>我是一个p</p>
</div>    
<script>
    let box = document.getElementById('box');
    console.log(box.innerHTML);
</script>
2、设置：会覆盖所有的内容。如果设置的内容包含了标签,不会解析出来,只会当做文本的一部分
box.innerHTML = '天生我才<b>必有用</b>'; //b标签不会解析，输出:天生我才<b>必有用</b>

补充：ie老浏览器支持 innerHTML，一些新的浏览器也还支持

textContent 是W3C的标准属性，但是ie老浏览器等不支持