innerHTML和innerText区别

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

bailizx

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

阅读量6.1k

点赞数 4

分类专栏： # js专题文章标签： js html

本文链接：https://blog.csdn.net/abc1194474469/article/details/105992559

版权

js专题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 总结

2 读取html中元素

3 在设置html元素的时候

1 总结

innnerHTML用来获取标签元素或设置标签元素，包含文本和Html标签。在读取元素的时候，会将文本和Html标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析Html标签，只显示文本，而不将标签显示出来。

innerText用来设置或获取标签内文本内容, 但它去除Html标签。在读取元素的时候，只会读取文本；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，不会解析Html标签，也就是说，里面的标签并不是html中的标签，而只是一个文本。

2 读取html中元素

innnerHTML在读取元素的时候，会将文本和Html标签一起读取出来；

innerText在读取元素的时候，只会读取文本。innnerHTML、innerText在设置元素的时候，会覆盖掉原来的元素中文本和标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = "myId">123</div>
    <div id = "myId_2">
        <span>内容1</span>
        <span>内容2</span>
    </div>
<script type="text/javascript">
    let ele = document.getElementById("myId");
    console.log(ele.innerText); //控制台输出 123
    console.log(ele.innerHTML); //控制台输出 123

    let ele_2 = document.getElementById("myId_2");
    console.log(ele_2.innerText);  //控制台输出: 内容1 内容2
    console.log(ele_2.innerHTML);
    /*控制台输出:
    <span>内容1</span>
    <span>内容2</span>
    * */

    /*使用innerText或者innerHTML设置ele中内容为新的值，
    原来的会发生改变，如果在原来的基础上面加上内容，那么可以使用“+=”进行拼接*/
    //ele.innerText = "456";
    ele.innerHTML = "456";
    console.log(ele.innerText); //控制台输出 456

</script>
</body>
</html>

结果

3 在设置html元素的时候

如果新的内容包含标签，innerHTML会解析Html标签，只显示文本，而不将标签显示出来；innerText不会解析Html标签，也就是说，里新内容中包含的标签并不是html中的标签，而只是一个文本，会将其一起显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = "myId_2">
        <span>内容1</span>
        <span>内容2</span>
    </div>
    <div id = "myId_3">
        <span>内容1</span>
        <span>内容2</span>
    </div>
<script type="text/javascript">
    let ele_2 = document.getElementById("myId_2");
    ele_2.innerText = "<span>内容3</span>";
    let ele_3 = document.getElementById("myId_3");
    ele_3.innerHTML = "<span>内容3</span>";
    /*控制台输出:
    <span>内容1</span>
    <span>内容2</span>
    * */

</script>
</body>
</html>

结果是：写js代码前（左），代码后（右）

百里于2020年5月8日

参考：文章

如果有错，请您指出！如有侵权，请联系我删除！

bailizx

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
innerHTML和innerText区别

目录1 总结2 读取html中元素3 在设置html元素的时候1 总结innnerHTML用来获取标签元素或设置标签元素，包含文本和Html标签。在读取元素的时候，会将文本和Html标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析Html标签，只显示文本，而不将标签显示出来。innerText用来设置或获取标签内文本内容, ...
复制链接

扫一扫