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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
jQuery 表格插件整理
Apr 27 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
5种 JavaScript 方式实现数组扁平化
Oct 05 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP4中session登录页面的应用
2008/07/25 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
PHP反射基础知识回顾
2020/09/10 PHP
JS常用字符串处理方法应用总结
2014/05/22 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python序列化与反序列化pickle用法实例
2019/11/11 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
创业资金计划书
2014/02/06 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
项目合作意向书
2015/05/08 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Python基础之元组与文件知识总结
2021/05/19 Python