innerHTML与innerText区别

最新推荐文章于 2024-03-10 14:01:32 发布

从来如此便对么

最新推荐文章于 2024-03-10 14:01:32 发布

阅读量170

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/msnhce/article/details/101802961

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

document对象中的两个属性innerHTML、innerText的作用

（1）获取对象的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>innerHTML</title>
    </head>

    <body>
        <p id="p1">AAA</p>

        <div id='div1'>
            <p id="p2">BBB</p>
        </div>

        <script>
            console.log(document.getElementById("p1"));
            console.log(document.getElementById("p1").innerHTML);
            console.log(document.getElementById("p1").innerText);

            console.log(document.getElementById("div1"));
            console.log(document.getElementById("div1").innerHTML);
            console.log(document.getElementById("div1").innerText);
        </script>
    </body>
</html>

控制台输出结果：

document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

（2）改变对象的值

document.getElementById("p1").innerHTML = "AAA-111";

document.getElementById("p2").innerText = "BBB-222";

参考：https://www.cnblogs.com/siduoxiaohua/p/10530876.html

从来如此便对么

关注

0
点赞
踩
1

收藏

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

document对象中的两个属性innerHTML、innerText的作用（1）获取对象的值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>innerHTML</title> </head&...
复制链接

扫一扫

专栏目录