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 相关文章推荐
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 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 xml实例 留言本
2009/03/20 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
微信小程序实现时间预约功能
2018/11/27 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
监理资料员岗位职责
2014/01/03 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Win10系统下配置Java环境变量
2021/06/13 Java/Android