js中innerText和innerHtml的区别

最新推荐文章于 2024-02-01 16:38:35 发布

爬楼梯的小新

最新推荐文章于 2024-02-01 16:38:35 发布

阅读量85

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122457343

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

innerText 不识别html标签去除空格和换行

innerHtml 识别html标签保留空格和换行

因为innerHtml 可以保留html标签所以使用场景较多

<body>
    <p></p>
    <div></div>
</body>
<script>
    var p = document.querySelector('p');
    var div = document.querySelector('div');
    p.innerText = '<strong>我是p</strong>'
    div.innerHTML = '<strong>我是盒子</strong>'
</script>

关于空格和换行运行效果图

<body>
    <div id="box">
        我是盒子2
        <span>你好</span>
    </div>
</body>
<script>
    var box = document.getElementById('box');
    console.log(box.innerHTML);
    console.log(box.innerText);
</script>