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 相关文章推荐
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
$.extend 的一个小问题
Jun 18 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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
第三节 定义一个类 [3]
2006/10/09 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
webpack external模块的具体使用
2018/03/10 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python最基本的输入输出详解
2015/04/25 Python
Python选课系统开发程序
2016/09/02 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
药品促销活动方案
2014/02/14 职场文书
新春寄语大全
2014/04/09 职场文书
大三学习计划书范文
2014/05/02 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
关于远足的感想
2015/08/10 职场文书
golang特有程序结构入门教程
2021/06/02 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Java中的Kotlin 内部类原理
2022/06/16 Java/Android