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有关的小细节
Apr 02 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
SVG实现时钟效果
Jul 17 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
全网小程序接口请求封装实例代码
Nov 06 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
DIY实用性框形天线
2021/03/02 无线电
PHP的博客ping服务代码
2012/02/04 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php阳历转农历优化版
2016/08/08 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
vue组件实例解析
2017/01/10 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python复制文件到指定目录的实例
2018/04/27 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Python高级property属性用法实例分析
2019/11/19 Python
tornado+celery的简单使用详解
2019/12/21 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
二年级小学生评语
2014/04/21 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL