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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python多维数组分位数的求取方式
2020/03/03 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
学生保证书范文
2014/04/28 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang