获取内容时:

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. 使用PasteSpider实现类似Jenkins的功能,让你的2G服务器也可以飞起

    或许你接触过Jenkins, 在我理解就是拉取源码,然后构建成镜像,最后启动容器! 但是这个功能对于小内存的服务器来说就是奢望了! 今天介绍一个新版本,把你这个遗憾弥补下! 在PasteSpider中 ...

  2. 树莓派3b+ 安装Ubuntu mate18.04系统 配置SSH 、 远程桌面realvnc

    Ubuntu mate  for  树莓派3b+ 系统下载: 下载地址: https://ubuntu-mate.org/download/ 这里用32位系统:(64位也可以的,虽然还是实验阶段的,不 ...

  3. Java如何防御XSS攻击?

    Q1.什么是XSS攻击? 定义很多,这里我找一个比较详细的解释 https://www.cnblogs.com/csnd/p/11807592.html Q2.为什么会有XSS攻击 也看上面的链接 Q ...

  4. 15-canvas渐变色

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  5. CH01_WPF概述

    第1章:WPF概述 本章目标 了解Windows图形演化 了解WPF高级API 了解分辨率无关性概念 了解WPF体系结构 了解WPF 4.5 WPF概述 ​ 欢迎使用 Windows Presenta ...

  6. 面试官:JDK中都用了哪些设计模式?

    设计模式是前辈们经过实践验证总结的解决方案,帮助我们构建出更具可维护性.可扩展性和可读性的代码.当然,在面试的过程中,也会或多或少的被问到.那么今天,我们就来看一道设计模式中的常见面试问题:JDK 中 ...

  7. docker生产环境jvm性能优化

    1.xmx与xms设置多大合适 docker获得的mem_usage的大小是从外部得到的java进程的内存大小,不仅仅是 -Xmx设置的大小,如果 -Xmx和docker分配的内存一致的话,由于jav ...

  8. 代码随想录Day17

    654.最大二叉树 给定一个不重复的整数数组 nums . 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点,其值为 nums 中的最大值. 递归地在最大值 左边 的 子数组前缀 ...

  9. WCF实例管理

    实例管理是对WCF使用的一系列技术的总称,通过它可以将客户端的请求绑定到服务实例上,并根据客户端请求的类型以确定服务实例的管理方式.由于应用程序在可扩展,性能,吞吐量,事物与对垒调用等方面存在巨大的差 ...

  10. BST 二叉搜索树 BinarySearchTree C++实现(递归/非递归)

    目录 二叉搜索树 基本概念 常用结论 用途 二叉搜索树的性能分析 二叉搜索树的操作 查找 插入 删除 代码实现 BSTree.hpp test.cc 二叉搜索树 基本概念 二叉搜索树(BST,Bina ...