JS修改元素内容-CFANZ编程社区

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>

输出结果如图
在这里插入图片描述

0 条评论