innerText 与 innerHtml的区别（二）

最新推荐文章于 2023-12-12 17:09:55 发布

安静的对折

最新推荐文章于 2023-12-12 17:09:55 发布

阅读量445

点赞数

分类专栏： JS 文章标签： textContent innerText innerHtml

本文链接：https://blog.csdn.net/k491022087/article/details/52566848

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

innerText 与 innerHtml不仅在获取元素文本上有区别，而且在设置上同样有区别。

1、innerText 在设置HTML标签时，会将<>进行转义，在输出的时候会原样输出，并不会解析HTML标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
</body>

<script>
    var box = document.getElementById("box");
    box.innerText = "<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>";
</script>
</html>

打印结果为：

这是P标签这是P标签这是P标签 这是P标签这是P标签这是P标签

2、innerHtml 在设置HTML标签时，浏览器会将HTML标签名解析成对应的标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
</body>

<script>
    var box = document.getElementById("box");
    box.innerHTML = "<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>";
</script>
</html>

打印的结果为：

这是P标签
这是P标签
这是P标签

3、封装兼容版本的innerText，因为低版本的火狐浏览器不支持innerText，而是支持textContent

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
</body>

<script>
    var box = document.getElementById("box");
    var str = "<p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>";
    setText(box, str);
    function setText(element, value) {
//        因为在IE8及之前的浏览器中获取element.innerText的值是undefine 所以判断类型比较好
        if(typeof element.innerText == "string") {
            element.innerText = value;
        }else {
            element.textContent = value;
        }
    }
</script>
</html>

安静的对折

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
innerText 与 innerHtml的区别（二）

innerText 与 innerHtml不仅在获取元素文本上有区别，而且在设置上同样有区别。1、innerText 在设置HTML标签时，会将 Document var box = document.getElementById("box"); box.innerText = "这是P标签这是P标签这是P标签";
复制链接

扫一扫