JS修改元素内容

Revin050

已于 2022-07-16 10:25:10 修改

阅读量772

点赞数 2

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

于 2022-01-08 19:15:57 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122384548

版权

JS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

JS修改元素内容

element.innerText

innerText 改变起始位置到终止位置的内容，但是不识别html标签，去除空格和换行

element.innerHTML

innerHTML 识别html标签保留空格和换行
举个例子

<body>
    <div class='class1'></div>
    <div class="class2"></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div1 = document.querySelector('.class1');
        div1.innerText = '<strong>今天是：         </strong> 2022';
        // 输出 <strong>今天是：         </strong> 2022
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        var div2 = document.querySelector('.class2')
        div2.innerHTML = '<strong>今天是：</strong> 2022';
        // 这两个属性是可读写的  可以获取元素里面的内容
        //输出 今天是：2022
        var p = document.querySelector('p');
        console.log(p.innerText);// 因为不识别HTML标签所以输出：我是文字123
        console.log(p.innerHTML);// 因为识别HTML标签所以输出：我是文字（换行）<span>123</span>
    </script>
</body>