innerText和innerHTML 一些问题分析


Posted in Javascript onMay 18, 2009

其中innerText特性用来修改起始标签和结束标签之间的文本的。例如,假设有个空的<div/>元素,希望将其变成<div>New text for the div.</div>。用DOM实现时,要这么做:
oDiv.appendChild(document.createTextNode("New text for the div."));
这段代码并不难读,但是很冗长。如果使用innerText,只要这么做:
oDiv.innerText = "New text for the div.";
使用innerText,代码更加简洁,并且更容易理解。另外,innerText会自动将小于号、大于号、引号和&符号进行HTML编码,所有是毫不需当心特殊字符:
oDiv.innerText = "New text for the <div/>.";
这一行代码的执行结果是<div>New text for the <div/>.</div>。但如何一定要再元素中包含HTML标签呢?这就是innerHTML所要解决的问题。
应用innerHTML特性,可以直接给元素分配HTML字符串,而不需考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong><em>World</em></div>。使用DOM,要用下面的代码:
var oStrong = document.createElement("strong');
oStrong.appendChild(document.createTextNode("hello"));
var oEm = document.createElement("em");
oEm.appendChild(document.createTextNode("World"));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(""));
oDiv.appendChild(oEm);
而使用innerHTML,代码就变成:
oDiv.innerHTML = "<strong>Hello</strong><em>World</em>";
七行代码一下就变成一行,这就是innerHML的威力!
还可以使用innerText和innerHTML来获取元素的内容。如果元素只包含文本,那么innerText和innerHTML返回相同的值。但是,如果同时包含文本和其他元素,innerText将只返回文本的表示,而innerHTML,将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。

代码 innerText innerHTML
Hello world
"Hello world" "Hello world"
Helloworld
"Hello world" "Helloworld"
"" ""
后,通过将innerText赋值给它自身,表示从指定的元素中删除所有的HTML标签。
oDiv.innerText = oDiv.innerText;
Javascript 相关文章推荐
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
JavaScript中的高级函数
Jan 04 Javascript
React diff算法的实现示例
Apr 20 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 #Javascript
Js 本页面传值实现代码
May 17 #Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 #Javascript
Javascript 强制类型转换函数
May 17 #Javascript
jQuery live
May 15 #Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 #Javascript
javascript Prototype 对象扩展
May 15 #Javascript
You might like
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
DOM精简教程
2006/10/03 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
js实现随机抽奖
2020/03/19 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python如何实现守护进程的方法示例
2017/02/08 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python中一些深不见底的“坑”
2019/06/12 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python configparser模块应用过程解析
2020/08/14 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
电焊工岗位职责
2014/03/06 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
基于redis+lua进行限流的方法
2022/07/23 Redis