繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > innerHTML,outerHTML,innerText,outerText
- Javascript
- javascript实例教程(15) 日期函数
- javascript实例教程(17) 使用字符串函数
- javascript实例教程(18) 数组
- javascript实例教程(19) 使用HoTMetal(1)
- javascript实例教程(19) 使用HoTMetal(2)
- javascript实例教程(19) 使用HoTMetal(3)
- javascript实例教程(19) 使用HoTMetal(4)
- javascript使图片加载进度实时显示
- 代码前置时页面输出脚本的要注意的问题|
- javascript网页中显示硬盘内容
- JS实现仿新浪信息提示效果
- Js 按照MVC模式制作自定义控件
- 滑动展开/收缩广告代码实例效果
- JS实现的滑动展开与折叠效果
- 时钟广告跳转状态栏等JS代码
- 一个以Javascript+xml的树型列表
- target 属性怎么用 JS 来控制？
- 一组常用的弹出窗口用法总结
- 冒泡算法的三种JavaScript表示
- 网页最简短的拖动对象代码实例演示
Javascript 中的 innerHTML,outerHTML,innerText,outerText
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 303 ::
收藏到网摘: n/a
innerHTML,outerHTML innerHTML检索或设置标签内的内容；
outerHTML检索或设置整个标签的内容（包含标签）。
<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerText);" value="innerText">
<input type="button" onclick="alert(document.all.fieldset.outerText);" value="outerText">
</fieldset>
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerText);" value="innerText">
<input type="button" onclick="alert(document.all.fieldset.outerText);" value="outerText">
</fieldset>
两个alert输出的结果分别是：
innerHTML：
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
outerHTML：
<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
</fieldset>
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
</fieldset>
innerText,outText输出标签内部的文本信息
上面两个Text按扭输出同样的内容：
Original Text
但是注意的是，赋值时，outerText会连带标签一起替换成目标文本，innerText只替换原来的文本。
<fieldset id="fieldset" style="width:200;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
</fieldset>
<input type="button" onclick="oSpan.innerText='changed'" value="inner change">
<input type="button" onclick="oSpan.outerText='changed'" value="outer change">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<SPAN ID="oSpan">Original Text</SPAN>
</fieldset>
<input type="button" onclick="oSpan.innerText='changed'" value="inner change">
<input type="button" onclick="oSpan.outerText='changed'" value="outer change">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
点inner change后，点innerHTML输出结果为：
<SPAN ID="oSpan">changed</SPAN>
点outer change后，点innerHTML输出结果为：
changed
自己用代码来体会一下
HTML 代码片段如下:
<div id=test><table><tr><td>文本<a>链接</a>另一段文本</td></tr></table></div>
<input type=button onclick=alert(test.innerText) value="show innerText"><br>
<input type=button onclick=alert(test.innerHTML) value="show innerHTML"><br>
<input type=button onclick=alert(test.outerHTML) value="show outerHTML"><br>
<input type=button onclick=alert(test.innerText) value="show innerText"><br>
<input type=button onclick=alert(test.innerHTML) value="show innerHTML"><br>
<input type=button onclick=alert(test.outerHTML) value="show outerHTML"><br>
<div id="div"><input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></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);">
<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);">
评论 (0) All
