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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
PHP 存储文本换行实现方法
2010/01/05 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python装饰器用法实例分析
2019/01/14 Python
超简单的Python HTTP服务
2019/07/22 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python多线程thread及模块使用实例
2020/04/28 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
五水共治捐款倡议书
2014/05/14 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年库房工作总结
2014/11/26 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
寻找成龙观后感
2015/06/12 职场文书
文明医院的标语集锦!
2019/07/24 职场文书