Javascript:innertext和innerhtml的区别

最新推荐文章于 2023-08-10 10:36:16 发布

Julian Q

最新推荐文章于 2023-08-10 10:36:16 发布

阅读量557

点赞数

分类专栏： # Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qjyws/article/details/119300088

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
一、区别
二、代码示例
- 1.代码演示
- 2.最终效果

前言

在Javascript中，通过控件对象的innertext和innerhtml属性都可以对控件对象的显示文字进行读取和修改，那么innertext和innerhtml属性的区别到底在哪里呢？

一、区别

innertext:不识别html标签，非标准，在修改文字时自动去除空格和换行；在读取时，innertext属性只将文本内容完全读出
innerhtml:能够识别html标签，W3C标准，能够保留空格和换行；在读取时，innnerhtml属性能够将内置的html标签等内容完全读出

二、代码示例

1.代码演示

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="innertext_div">

    </div>
    <div id="innerhtml_div">

    </div>
    <p>
        我是文字:
        <span>
            今天天气真好啊
        </span>
    </p>
    <script>
        //innertext:
        var divtext = document.querySelector('#innertext_div');
        divtext.innerText = '<strong>今天天气</strong>   真好啊';
        //innerhtml:
        var divhtml = document.querySelector('#innerhtml_div');
        divhtml.innerHTML = '<strong>今天  天气</strong>真好啊';

        //进行读操作
        var p = document.querySelector('#innertext_div');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

</html>

2.最终效果

在这里插入图片描述

Julian Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript:innertext和innerhtml的区别

文章目录前言一、区别二、代码示例1.代码演示2.最终效果前言在Javascript中，通过控件对象的innertext和innerhtml属性都可以对控件对象的显示文字进行读取和修改，那么innertext和innerhtml属性的区别到底在哪里呢？一、区别innertext:不识别html标签，非标准，在修改文字时自动去除空格和换行；在读取时，innertext属性只将文本内容完全读出innerhtml:能够识别html标签，W3C标准，能够保留空格和换行；在读取时，innnerht
复制链接

扫一扫