js中innerText和innerHTML的区别

最新推荐文章于 2024-03-17 09:51:08 发布

Jeff~李

最新推荐文章于 2024-03-17 09:51:08 发布

阅读量329

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44126152/article/details/104414910

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

innerText和innerHTML

首先我要说一下，这两个都有获取值和赋予值的方法。

innerText();innerHTML();里面不传参数就是获取值。传参数就是赋予值。

以IE为测试对象。

首先我们说，赋值

innerText

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        //添加按钮点击事件
        window.onload = function () {
            document.getElementById("Button1").onclick = function () {
                document.getElementById("dv").innerText = "<p>这是一个p</p>"；
            }

        }

    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
    <div id="dv">
        <p>嘿嘿</p>
    </div>
</body>
</html>

打印出来是这样

下面是innerHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        //添加按钮点击事件
        window.onload = function () {
            document.getElementById("Button1").onclick = function () {
                document.getElementById("dv").innerHTML = "<p>这是一个p</p>";
            }
        }

    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
    <div id="dv">
        <p>嘿嘿</p>
    </div>
</body>
</html>

打印出来是这个

综上，我们会发现，再赋值的时候，innerHTML会自动过滤HTML标签，而innerText不会过滤标签。

其次，我们说一下取值

innerText

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        //添加按钮点击事件
        window.onload = function () {
            document.getElementById("Button1").onclick = function () {
                var content = document.getElementById("dv");
                alert(content.innerText);
            }
        }

    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
    <div id="dv">
        <p>嘿嘿</p>
    </div>
</body>
</html>

结果是

这是innerHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        //添加按钮点击事件
        window.onload = function () {
            document.getElementById("Button1").onclick = function () {
                var content = document.getElementById("dv");
                alert(content.innerHTML);             
            }
        }

    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
    <div id="dv">
        <p>嘿嘿</p>
    </div>
</body>
</html>

结果是

综上，我们取值的时候，innerHTML会把Html代码过滤出来，而InnerText不会。

所以我们用的时候，看情况。

Jeff~李

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
js中innerText和innerHTML的区别

innerText和innerHTML首先我要说一下，这两个都有获取值和赋予值的方法。innerText();innerHTML();里面不传参数就是获取值。传参数就是赋予值。以IE为测试对象。首先我们说，赋值innerText<!DOCTYPE html><html><head> <meta charset="utf...
复制链接

扫一扫

专栏目录