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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • html跳转网页代码_js访问url

    html跳转网页代码_js访问urlJS判断搜索引擎来路跳转代码:varregexp=/\.(sogou|soso|baidu|google|youdao|yahoo|bing|118114|biso|gougou|ifeng|ivc|sooule|niuhu|biso)(\.[a-z0-9\-]+){1,2}\//ig;varwhere=document.referrer;if(regexp.test(where)){

    2022年8月12日
    5
  • verilog流水线设计代码_十进制BCD译码器的verilog

    verilog流水线设计代码_十进制BCD译码器的verilog流水线概述如下图为工厂流水线,工厂流水线就是将一个工作(比如生产一个产品)分成多个细分工作,在生产流水线上由多个不同的人分步完成。这个待完成的产品在流水线上一级一级往下传递。比如完成一个产品,需要8道工序,每道工序需要10s,那么流水线启动后,不间断工作的话,第一个产品虽然要80s才完成,但是接下来每10s就能产出一个产品。使得速度大大提高。当然这也增加了人员等资源的付出。对于电路的流水线…

    2022年8月14日
    5
  • 计算距离矩阵的方法_矩阵的欧式距离

    计算距离矩阵的方法_矩阵的欧式距离给定一个 N 行 M 列的 01 矩阵 A,A[i][j] 与 A[k][l] 之间的曼哈顿距离定义为:dist(A[i][j],A[k][l])=|i−k|+|j−l|输出一个 N 行 M 列的整数矩阵 B,其中:B[i][j]=min1≤x≤N,1≤y≤M,A[x][y]=1dist(A[i][j],A[x][y])输入格式第一行两个整数 N,M。接下来一个 N 行 M 列的 01 矩阵,数字之间没有空格。输出格式一个 N 行 M 列的矩阵 B,相邻两个整数之间用一个空格隔开。数据范围

    2022年8月8日
    4
  • 线程有哪些属性_thread runnable callable区别

    线程有哪些属性_thread runnable callable区别1、当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的。2、当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行结束。3、只有IsBackground=TRUE的线程才会随着主线程的退出而退出。4、当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程。后台线程将会随着主线程的退出而退出。5、原理:只要所有前台线程都终止后,CLR就会对每一个活在的后台线程调用Abort()

    2022年10月17日
    0
  • 常见的js算法_javascript数据结构与算法

    常见的js算法_javascript数据结构与算法常见的几种js算法(一)快速排序算法1.1:先从数列中取出一个数作为“基准”。1.2:分区过程:将比这个“基准”大的数全放到“基准”的右边,小于或等于“基准”的数全放到“基准”的左边。1.3:再对左右区间重复第二步,直到各区间只有一个数。代码实现:varquickSort=function(arr){if(arr.length<=1){retur…

    2022年10月4日
    0
  • 什么是断点续传?前端如何实现文件的断点续传「建议收藏」

    什么是断点续传?前端如何实现文件的断点续传「建议收藏」什么是断点续传?就是下载文件时,不必重头开始下载,而是从指定的位置继续下载,这样的功能就叫做断点续传。断点续传的理解可以分为两部分:一部分是断点,一部分是续传。断点的由来是在下载过程中,将一个下载

    2022年7月3日
    110

发表回复

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

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