JavaScript 中 innerHTML 与 innerText 的用法与区别- 前端开发

文章目录

一、innerHTML

innerHTML 可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)

这里的包含 HTML 标签的意思是，包含标签所产生的的效果

获取元素的内容：element.innerHTML;

给元素设置内容：element.innerHTML =htmlString;

<body>
    <p id="p">
        <font color="red">标签内的文本</font>
    </p>

    <script>
        var content = document.getElementById("p")
        document.write(content.innerHTML + "<br>" )
    </script>
</body>

在这里插入图片描述
标签所产生的效果同样被显示出来

二、innerText

innerText 可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签产生的效果)

获取元素的内容：element.innerText;
给元素设置内容：element.innerText = string;

<body>
    <p id="p">
        <font color="red">标签内的文本</font>
    </p>

    <script>
        var content = document.getElementById("p")
        document.write(content.innerText + "<br>" )
    </script>
</body>

在这里插入图片描述
不包含标签所产生的效果

三、innerHTML 与 innerText 的用法与区别

（1）如果使用 innerText 主要是设置文本的,设置标签内容,是没有标签的效果的
（2） innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
（3）想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

innerHTML才是真正的获取标签中间的所有内容