惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
Blog — PlanetScale
Blog — PlanetScale
腾讯CDC
aimingoo的专栏
aimingoo的专栏
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
J
Java Code Geeks
G
Google Developers Blog
N
Netflix TechBlog - Medium
Vercel News
Vercel News
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
I
InfoQ
Stack Overflow Blog
Stack Overflow Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
The Blog of Author Tim Ferriss
罗磊的独立博客
GbyAI
GbyAI
小众软件
小众软件
大猫的无限游戏
大猫的无限游戏
WordPress大学
WordPress大学
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - 心的感觉

office 2007 下 PDFMaker文件遗失 问题解决办法 PL/SQL 连接Oracle10g失败 document.all.WebBrowser为空或不是对象 同事发的,很感人的一篇文章,记录下来,洁净心灵 有用的正则表达式或JS方法 有用的两个快捷方式/VS及dreamweaver怎么把源码排列整齐 div隐藏的两种方式 自己遇到oracle的错误记录 怎么彻底删除oracle 清空Oracle 10g回收站中以BIN$开头的表 PowerDesigner12 菜单翻译 PowerDesigner 帮助文档 漂亮的周涛 GridView表头出现乱码而正文正常的问题 PowerDesigner教程系列(六)概念数据模型 PowerDesigner教程系列(五)概念数据模型 PowerDesigner教程系列(四)概念数据模型 PowerDesigner教程系列(三)概念数据模型 PowerDesigner教程系列(二)概念数据模型
innerHTML,outerHTML,innerText,outerText的区别和用法
心的感觉 · 2009-01-21 · via 博客园 - 心的感觉

转自这位朋友http://hi.baidu.com/xpow

innerHtml 和 innerText

<div id="test">
<span style="color:red">test1</span> test2
</div>

在JS中可以使用:

test.innerHTML:

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

  从起始位置到终止位置的内容, 但它去除Html标签

  上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

  除了包含innerHTML的全部内容外, 还包含对象标签本身。

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

完整示例:

<div id="test">
<span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

<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>