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)
上一篇 2022年6月16日 下午9:16
下一篇 2022年6月16日 下午9:24


相关推荐

  • Android开发——RelativeLayout.LayoutParams的使用「建议收藏」

    Android开发——RelativeLayout.LayoutParams的使用「建议收藏」前言在日常的Android开发当中,我们少不了需要动态改变控件在RelativeLayout界面的位置。那么我们就需要使用到RelativeLayout.LayoutParams。RelativeLayout.LayoutParamsRelativeLayout.LayoutParams是一个RelativeLayout的布局参数,我们改变控件的就需要使用到。初始化//包裹内容Rel…

    2022年7月17日
    28
  • 详细介绍 GPL 协议

    详细介绍 GPL 协议在自由软件所使用的各种许可证之中 最为人们注意的也许是通用性公开许可证 GeneralPubli 简称 GPL GPL 同其它的自由软件许可证一样 许可社会公众享有 运行 复制软件的自由 发行传播软件的自由 获得软件源码的自由 改进软件并将自己作出的改进版本向社会发行

    2026年3月17日
    2
  • “龙虾”安全卫士来了,一句话即可安装

    “龙虾”安全卫士来了,一句话即可安装

    2026年3月14日
    2
  • OpenCV条形码识别

    OpenCV条形码识别OpenCV 条形码识别条形码识别目标基本 EAN13 条码检测器初始化探测解码结果原始图片 detectAndDec 的结果条形码识别目标在这一章当中 我们将熟悉 OpenCV 中可用的条形码检测和解码方法 基本条形码是识别现实生活中商品的主要技术 普通条形码是由反射率差异很大的黑条和白条排列的平行线图案 条形码识别是在水平方向上扫描条形码 以获得一串由不同宽度和颜色的条形码组成的二进制代码 即条形码的代码信息 条形码的内容可以通过与各种条形码编码方法匹配来解码 对于当前的工作 我们仅支持 EAN13

    2026年2月9日
    3
  • 51单片机的串口通信(一)

    51单片机的串口通信(一)串口通信好东西 但我没用过 下面照着普中科技的 ppt 搬运下 nbsp nbsp nbsp nbsp 随着多微机系统的广泛应用和计算机网络技术的普及 计算机的通信功能愈来愈显得重要 计算机通信是指计算机与外部设备或计算机与计算机之间的信息交换 通信方式有并行通信和串行通信两种 并行通信通常是将数据字节的各位用多条数据线同时进行传送 图一 并行通信串行通信是将数据字节分成一位一位的形式在

    2026年3月18日
    3
  • gimp中文版教程_GIMP中详细教程.pdf「建议收藏」

    gimp中文版教程_GIMP中详细教程.pdf「建议收藏」GIMP中详细教程GIMP实用系列教程1文件的打开和存储概述打开GIMP软件其初始界面如下:左边是工具,工具箱中每选择一种工具后,通常在其下部会出现一个与其相配的选项栏一起使用的。因此每选好一种工具,首先要把选项栏中的有关选项根据需要选定以后才开始使用。例如:图中选择了画笔,则画笔的选项栏可以选择其不透明度、画笔的笔尖形状、画笔的大小等选项。右边通常可以放置一个图层对话框,如未出现可以在下拉…

    2022年4月19日
    97

发表回复

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

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