JavaScript中innerHTML与innerText,createTextNode的区别
innerHTML和innerText
它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行。 innerText 会把替换内容里的 HTML 标记原样输出而不执行。
例如有如下代码:
var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素
e.innerHTML = content ; // 显示结果为 这是对innerHTML和innerText的测试
e.innerText = content ; // 显示结果为 <b>这是对innerHTML和innerText的测试</b>
innerHTML和createTextNode
innerHTML可以识别标签,而createTextNode会将内容全部转化为字符串
例如有如下代码:
var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素
e.innerHTML = content ; // 显示结果为 这是对innerHTML和innerText的测试
var text=createTextNode(content) ;
e.appendChild(text)// 显示结果为 <b>这是对innerHTML和innerText的测试</b>
这样看来innerText和createTextNode的基本用法是一样的,都无法识别标签并转化为html文件。
但是innerText是一次性修改,会将标签里所有内容修改,createTextNode可以逐条插入,避免整体的修改。
JavaScript中innerHTML与innerText,createTextNode的区别的更多相关文章
- 【JS】JavaScript中innerHTML与innerText,createTextNode的区别
innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...
- 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
- (转)JS中innerHTML,innerText,value
原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...
- JavaScript中const、var和let区别浅析
在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
- JavaScript中=、==、===以及!=、!==的区别与联系
JavaScript中=.==.===以及!=.!==的区别与联系 在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...
- JavaScript中object和Object有什么区别
JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...
- JS中innerHTML 和innerText和value的区别
(1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...
- JS中innerHTML,innerText,value
一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...
随机推荐
- HttpReponse
属性: django将请求报文中的请求行.头部信息.内容主体封装成 HttpRequest 类中的属性. 除了特殊说明的之外,其他均为只读的. 0.HttpRequest.scheme 表示请 ...
- Python3:递归实现输出目录下所有的文件
今天来整理一下os库中方法的使用,如何输出一个目录下的所有文件? 1.首先介绍几个基本的的方法: 1)os.getcwd() #返回当前工作目录 2)os.listdir() #返回一个列表, ...
- 原生js写轮播图效果
<script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg" ...
- 【转载】使用sklearn优雅地进行数据挖掘
原文:http://www.cnblogs.com/jasonfreak/p/5448462.html 目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键 ...
- spring集成Junit做单元测试及常见异常解决办法
spring-test依赖包 <!--Spring-test --> <!-- https://mvnrepository.com/artifact/org.springframew ...
- how2heap学习笔记
github源代码地址 这里只分析glibc2.25堆分配的特性,为了方便调试编译时使用 gcc -g -no-pie <input_file_name> -o <output_fi ...
- 用echarts写的multiple-trees demo
echarts-multiple-trees 预览https://zhangzn3.github.io/echarts-multiple-trees/demo.html //根据数据条数自适应区域大小
- laravel 黑名单功能实现
创建黑名单表迁移:php artisan make:model Models/BlackFeeds -m (生成模型和迁移文件) 迁移文件中创建如下字段: public function up( ...
- Centos查看系统CPU个数、核心数、线程数
1.查看 CPU 物理个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l 2.查看 CPU 核心数量 grep 'core id' /proc/ ...
- 一步步建立 Vue + Cesium 初始化项目
一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...