innerHTML,outerHTML,innerText,outerText的用法及区别解析


Posted in Javascript onDecember 16, 2013

<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
<script language="javascript">
function changeb(obj)
{
 obj.outerHTML = "<input type='text' value='设置对象内的HTML,包括标签' style='width:200px;'></input>"
}
function changea(obj)
{
 obj.innerHTML = "<b>设置对象内的HTML</b>"
}
</script>
<br><br>
innerHTML获取标签内的HTML<br>
outerHTML获取标签及标签内的HTML<br>
innerTEXT和outerTEXT都是获取标签内的文本,相同。<br>
<br><br>
<div id="div1" style="background-color:#ff9966;border:1px #ff0000 dashed;">这是一个层</div>
<br>
<input name="innerHTML1" value="innerHTML" type="button" OnClick="changea(div1)">
<input name="outerHTML1" value="outerHTML" type="button" OnClick="changeb(div1)">
<input name="innerText1" value="innerText" type="button" OnClick="div1.innerText='使用innerText替换文本'">
<input name="outerText1" value="outerText" type="button" OnClick="div1.outerText='使用outerText会连带标签一起替换成目标文本,层也替换掉了'">
<br>
<p>
innerHTML设置标签内的HTML<br>
outerHTML设置标签及标签内的HTML<br>
innerTEXT设置签内的文本<br>
innerTEXT设置签内的文本,包括标签一起替换。<br>
</p>

innerHTML 设置或获取位于对象起始和结束标签内的 HTML <br>
outerHTML 设置或获取对象及其内容的 HTML 形式 <br>
innerText 设置或获取位于对象起始和结束标签内的文本 <br>
outerText 设置(包括标签)或获取(不包括标签)对象的文本 <br><br>

Javascript 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 #Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 #Javascript
JS冒泡事件的快速解决方法
Dec 16 #Javascript
JS批量操作CSS属性详细解析
Dec 16 #Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 #Javascript
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Django框架视图函数设计示例
2019/07/29 Python
Python os库常用操作代码汇总
2020/11/03 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
党员干部形式主义个人整改措施
2014/09/17 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers