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的区别的更多相关文章

  1. 【JS】JavaScript中innerHTML与innerText,createTextNode的区别

    innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...

  2. 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别

    测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别   我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...

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

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

  4. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  5. JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...

  6. JavaScript中=、==、===以及!=、!==的区别与联系

    JavaScript中=.==.===以及!=.!==的区别与联系   在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...

  7. JavaScript中object和Object有什么区别

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...

  8. JS中innerHTML 和innerText和value的区别

    (1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...

  9. JS中innerHTML,innerText,value

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

随机推荐

  1. xls添加 序号列技巧

    问题背景:在给xls添加一列序列时常碰到一个问题,用下拉很不科学(如果行数很多):用双击需要右边有一列不断开的数据列. 方法一:在A1 =row()回车,选择范围,快捷键 ctrl+d,   复制其文 ...

  2. webpack4之踩坑总结

    一.先放上项目目录结构 二.问题总结 1.关于process.env.NODE_ENV问题 刚开始的时候,我想在配置文件中使用到这个环境变量,却发现一直获取不到值,晕晕晕,查了资料才知道,这个环境变量 ...

  3. ES6随笔

    let, const 这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途.首先来看下面这个例子: var name = 'zach' while (true) { va ...

  4. js小方法,获取知道公历生日 (‘1992-01-19’),获取阴历生日日期,属相,非简单根据年份判断-----------声明:整理自网络!!

    let lunar = { tg: '甲乙丙丁戊己庚辛壬癸', dz: '子丑寅卯辰巳午未申酉戌亥', number: '一二三四五六七八九十', year: '鼠牛虎兔龙蛇马羊猴鸡狗猪', mont ...

  5. Deformable Convolutional Network

    Deformable conv赋予了CNN位置变换的能力,与普通卷积的对比如下.可以看到,在每个特征点上,会产生一个偏移,变成 不规则的卷积(感觉本质上,就是让CNN自己去学习感受野). 思想来源于S ...

  6. 【由浅入深理解java集合】(四)——集合 Queue

    今天我们来介绍下集合Queue中的几个重要的实现类.关于集合Queue中的内容就比较少了.主要是针对队列这种数据结构的使用来介绍Queue中的实现类. Queue用于模拟队列这种数据结构,队列通常是指 ...

  7. nginx在后端服务维护时,自动挂公告页

    本想用lua玩一把,但我发现我的要求很简单,直接用upstream的weight和backup就OK了. 于是,这样玩了一把. 作个记录. 1).down 表示当前的server暂时不参与负载2).w ...

  8. java的编译过程

    用记事本编写两个java文件 第一个Employee.java import java.io.*; public class Employee{ String name; int age; Strin ...

  9. SQL反模式学习笔记13 使用索引

    目标:优化性能 改善性能最好的技术就是在数据库中合理地使用索引.  索引也是数据结构,它能使数据库将指定列中的某个值快速定位在相应的行. 反模式:无规划的使用索引 1.不使用索引或索引不足 2.使用了 ...

  10. 即将上线的Imcash是何方神圣?

    区块链的诞生,让数字资产来到这个时代,每个人的财产分布又多了一种十分重要的选择. 当下每个人最需要的就是一款优秀的数字资产管理平台,目前市面上各种平台层出不穷,在线管理.离线管理.全节点钱包.轻钱包. ...