获取内容时:

innerText会自动删除空格和换行;innerHTML会保留空格和换行;

<body>
<div>获 取内 容</div>
<script>
const div = document.querySelector('div')
console.log(div.innerText) // 获 取 内 容
console.log(div.innerHTML) // 获 取 内 容
</script>

设置内容时:

innerText不会识别标签;innerHTML会解析标签;

<body>
<div></div>
<script>
const div = document.querySelector('div')
div.innerText = `<h1>设置内容</h1>` // <h1>设置内容</h1> 不能识别标签 h1
div.innerHTML = `<h1>设置内容</h1>` // 设置内容 解析标签
</script>

innerText 和 inner HTML 的区别的更多相关文章

  1. innerHTML innerText与outerHTML间的区别

    innerHTML与innerText及outerHTML间的区别最容易使初学者搞混淆,为了更好的使读者区分开.下面我就通过一个demo来解释: 代码: <!DOCTYPE html>&l ...

  2. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  3. JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

    value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...

  4. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?

    1.innerHTML 属性 (参考自<JavaScript高级程序设计>294页) 在读模式下,innerHTML 属性返回与调用元素的所有子节点(包括元素.注释和文本节点)对应的 HT ...

  5. JS中innerHTML,innerText,value

    一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...

  6. (转)JS中innerHTML,innerText,value

    原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...

  7. JS与jQuery中html-与-text方法的区别

    所有的实例均用下面的html <div id="id0"> <div id="id1"> 直接text <p> <sp ...

  8. DOM扩展-HTML5、专有扩展

     HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...

  9. js中兼容性问题的封装(能力检测)

    所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题. 获得页面文本内容的方式:innnerText 或textConten ...

  10. 后台动态设置前台标签内容和属性(转自http://www.wzsky.net/html/Program/net/26171.html)

    和以前的asp不同,在asp.net中为了彻底的代码分离,我们一般不采用<%=%>嵌入标签中来设置一些属性和内容.一般来说有2种情况:(一)设置标签的内容,比如<title>这 ...

随机推荐

  1. proxmox ve 部署双节点HA集群及glusterfs分布式文件系统

    分布式存储的作用 加入分布式存储的目的:主要是为了对数据进行保护避免因一台服务器磁盘的损坏,导致数据丢失不能正常使用.   参考文档:https://gowinder.work/post/proxmo ...

  2. 【Spring】04 注解实现自动装配

    1.使用注解实现自动装配 注解的基础源于JDK1.5的新特性 在Spring2.5开始支持了注解功能 如何使用? 1.导入约束 xmlns:context="http://www.sprin ...

  3. 【RabbitMQ】10 深入部分P3 死信队列(交换机)

    1.死信交换机 说是死信队列,是因为RabbitMQ和其他中间件产品不一样 有交换机的概念和这个东西存在,别的产品只有队列一说 DeadLetterExchange 消息成为DeadMessage之后 ...

  4. 【Scala】08 模式匹配 Match Case

    由Scala封装的一套match case处理,功能比原Java的更为强大 package cn import scala.collection.immutable.IndexedSeqDefault ...

  5. 【DataBase】MySQL根据父节点查询下面的所有子节点

    表结构如下: /* Navicat Premium Data Transfer Source Server : 主机 Source Server Type : MySQL Source Server ...

  6. 【Hibernate】03 配置文件 & API

    映射器文件: - 字段的Column属性可以不写缺省,这将表示和实体类的属性标识一样 - type 属性用于声明表字段在Java中的类型,这个属性可不写缺省,自动匹配 Hibernate 4个核心AP ...

  7. 如何理解自动驾驶的分级:L0、L1、L2、L3、L4、L5

    相关: https://baijiahao.baidu.com/s?id=1792281493472406727&wfr=spider&for=pc L0,就是完全没有自动驾驶技术的车 ...

  8. NVIDA GPU-SXM和NVIDA GPU-PCIe 两种类型显卡到底哪个性能更高?

    相关: 大模型时代该用什么样的显卡 -- 实验室新进两块A800显卡 浅析:NVIDA GPU卡SXM和PCIe之间的差异性 原来SXM类型的显卡比PCIex类型显卡性能要高.PCIE版本是通用接口, ...

  9. 易拍照 —— 毕业生图像采集操作指南——如何使用 “易拍照” 微信小程序进行图像采集

    易拍照 -- 毕业生图像采集操作指南--如何使用 "易拍照" 微信小程序进行图像采集 ============================================

  10. java:找不到符号(使用lombok)

    1.背景 启动报错: Error:(76, 34) java: 找不到符号 符号: 方法 getOrderNo() 位置: 类型为XXXXX.request.coupon.SubmitOrderObj ...