JS中innerHTML、outerHTML、innerText、outerText的用法与区别

JS中innerHTML、outerHTML、innerText、outerText的用法与区别1、功能说明:innerHTML设置或获取位于对象起始和结束标签内的HTMLinnerText设置或获取位于对象起始和结束标签内的文本outerHTML设置或获取对象及其内容的HTML形式outerText设置(包括标签)或获取(不包括标签)对象的文本2、示例页面有如下代码:span1span2varinnerHTML=document.getElemen

大家好,又见面了,我是你们的朋友全栈君。

1、功能说明:

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

innerText 设置或获取位于对象起始和结束标签内的文本

outerHTML 设置或获取对象及其内容的HTML形式

outerText 设置(包括标签)或获取(不包括标签)对象的文本

2、示例

页面有如下代码:

<div id="mydiv">
      <span style="color:red">span1</span> span2
</div>
var innerHTML = document.getElementById("mydiv").innerHTML;
var innerText = document.getElementById("mydiv").innerText; //Firefox不支持 
var outerHTML = document.getElementById("mydiv").outerHTML;
var outerText = document.getElementById("mydiv").outerText; //Firefox不支持 
console.info(innerHTML);  //输出<span style="color:red">span1</span> span2
console.info(innerText);  //输出span1 span2
console.info(outerHTML);  //输出<div id="mydiv"><span style="color:red">span1</span>span2</div>
console.info(outerText);  //输出span1 span2

PS: innerHTML是符合W3C标准的属性,而innerText对Firefox是不支持的,因此,尽可能地去使用innerHTML,

而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,

再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

console.info(document.getElementById('mydiv').innerHTML.replace(/<.+?>/gim,''));


查看演示:http://itmyhome.com/js_innerHTML_innerText_differences/

作者:itmyhome

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149339.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【报错解决办法】AttributeError: module ‘thread‘ has no attribute ‘start_new_thread‘

    【报错解决办法】AttributeError: module ‘thread‘ has no attribute ‘start_new_thread‘项目中有包名 thread python 中文件夹名也是包名 与系统的 thread 库冲突了 把项目中的文件夹改名即可 即把项目中的 thread py 改成其他名称 pycharm 中右键 thread py refactor rename 修改为与系统 thread 库不相同的名称

    2025年10月23日
    5
  • icem划分网格步骤_ICEM网格划分步骤

    icem划分网格步骤_ICEM网格划分步骤《ICEM网格划分步骤》由会员分享,可在线阅读,更多相关《ICEM网格划分步骤(19页珍藏版)》请在人人文库网上搜索。1、实用标准文案、ICEM网格划分步骤1、在solidworks、workbeach等建立模型(最好模型另存为.txt格式2、在ICEM中导入计算模型3、建立一个文件夹,并选单位。最后点击apply,导入模型ImportGcornetFromPiaohdP可弓旳lidF…

    2022年5月9日
    189
  • XXE详解

    XXE详解xxe漏洞的学习与利用总结前言对于xxe漏洞的认识一直都不是很清楚,而在我为期不长的挖洞生涯中也没有遇到过,所以就想着总结一下,撰写此文以作为记录,加深自己对xxe漏洞的认识。xml基础知识要了解xxe漏洞,那么一定得先明白基础知识,了解xml文档的基础组成。XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许…

    2022年5月10日
    58
  • 如何查看linux服务器cuda_[882]如何查看windows和linux的CUDA版本

    如何查看linux服务器cuda_[882]如何查看windows和linux的CUDA版本linux查看cuda版本cuda一般安装在/usr/local/cuda/路径下,该路径下有一个version.txt文档,里面记录了cuda的版本信息cat/usr/local/cuda/version.txt如何查看windows的CUDA版本CUDA是什么?CUDA(ComputeUnifiedDeviceArchitecture),是显卡厂商NVIDIA推出的运算平台。CU…

    2022年10月21日
    2
  • python中的取整

    python中的取整python中的取整

    2022年7月5日
    21

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号