文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

innerHTMLinnerTexttextContent使用区别示例详解

2022-11-16 00:17

关注

1、提出问题

涉及元素节点内容读取或修改的时候,有三个属性可供选择innerHTMLinnerText,textContent

那么这三个属性各有什么不同,又分别适用于什么情况。

受 这个说明启发,我写了个简单的例子比较了三者的不同。

2、开始实验

一段简单的HTML代码:

<div id="source">
    <style>
        .upper-case {
            text-transform: uppercase;
        }
        .hidden {
            display: none;
        }
    </style>
    <div>
        a <span class="upper-case">simple</span> text.
        <span class="hidden"> a hidden text.</span>
    </div>
</div>
<div id="innerHTML"></div>
<div id="innerText"></div>
<div id="textContent"></div>
<script>
    let source = document.getElementById("source");
    function trans(which) {
        let str = source[which];
        console.log(str);
        document.getElementById(which)[which] = str;
    }
    trans("innerHTML");
    trans("innerText");
    trans("textContent");
</script>

3、记录数据

结果页面:

控制台输出:

    <style>
        .upper-case {
            text-transform: uppercase;
        }
        .hidden {
            display: none;
        }
    </style>
    <div>
        a <span class="upper-case">simple</span> text.
        <span class="hidden"> a hidden text.</span>
    </div>
a SIMPLE text.
        .upper-case {
            text-transform: uppercase;
        }
        .hidden {
            display: none;
        }
        a simple text.
         a hidden text.

4、分析结果

从页面结果和控制台的结果来看:

5、得出结论

事实上,很多时候,尤其是元素内部只是普通文本的时候,三者的区别不会造成什么问题,所以很多人对它们的区别不清楚。

不过,我认为,至少应该记住:在涉及HTML内容时,必须使用innerHTML;否则,使用textContent,保证安全。 使用innerText往往是为了兼容IE6-7。

以上就是innerHTML innerText textContent使用区别示例详解的详细内容,更多关于innerHTML innerText textContent的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯