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


相关推荐

  • matlab约束条件怎么写_matlab数组超过预设大小

    matlab约束条件怎么写_matlab数组超过预设大小网上例子:假设我们要用matlab解决如下线性规划问题:max4x1+2×2+x3s.t.2×1+x2<=1×1+2×3<=2×1+x2+x3=1×1>=0x1<=1×2>=0x2<=1×3>=0x3<=2如果用yalmip的话,只需要如下简单几句:>>x=sdpva…

    2022年10月13日
    4
  • 自定义QTreeView

    自定义QTreeViewQt之QTreeView(一) (2014-12-2316:51:33)转载▼标签: qt qtreeview qtableview qabstractitemmodel分类: Qt    之前有讲解过QTableView的使用Qt之QTableView,这节讲解一下也较为常用

    2022年6月8日
    41
  • OpenClaw 快速接入QQ!1分钟拥有你的专属智能体

    OpenClaw 快速接入QQ!1分钟拥有你的专属智能体

    2026年3月13日
    2
  • java CAS详解[通俗易懂]

    java CAS详解[通俗易懂]CAS解释:CAS(compareandswap),比较并交换。可以解决多线程并行情况下使用锁造成性能损耗的一种机制.CAS操作包含三个操作数—内存位置(V)、预期原值(A)和新值(B)。如果内存位置的值与预期原值相匹配,那么处理器会自动将该位置值更新为新值。否则,处理器不做任何操作。一个线程从主内存中得到num值,并对num进行操作,写入值的时候,线程会把第一次取到的num值和主内存中num值进行比较,如果相等,就会将改变后的num写入主内存,如果不相等,则一直循环对比,知道成功为止。CAS

    2022年7月9日
    28
  • windows密码获取 — LC5暴力激活成功教程Hash密码「建议收藏」

    windows密码获取 — LC5暴力激活成功教程Hash密码「建议收藏」​错,可以改,那,错过呢。。。—-网易云热评一、首先用QuarksPwDump导出hash值并存储到1.txtquarkspwdump–dump-hash-local–output1.txt二、下载并安装LC5并注册1、下载地址:回复2、双击lc5setup一路下一步,3、将hashgen和lc5替换了原文件4、双击lc5,并打开注册机,点击administrator三、使用方法1、点击会话,导入1.txt…

    2022年7月24日
    27
  • 解压war包工具_rar解压下载

    解压war包工具_rar解压下载解压war,要用jar命令jar-xfdemo.war

    2022年10月5日
    5

发表回复

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

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