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

推荐订阅源

T
The Blog of Author Tim Ferriss
TaoSecurity Blog
TaoSecurity Blog
Apple Machine Learning Research
Apple Machine Learning Research
Hugging Face - Blog
Hugging Face - Blog
IT之家
IT之家
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
小众软件
小众软件
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
S
SegmentFault 最新的问题
T
Troy Hunt's Blog
N
News and Events Feed by Topic
雷峰网
雷峰网
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
PCI Perspectives
PCI Perspectives
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
www.infosecurity-magazine.com
www.infosecurity-magazine.com
博客园 - 三生石上(FineUI控件)
Schneier on Security
Schneier on Security
T
The Exploit Database - CXSecurity.com
L
LINUX DO - 最新话题
V
V2EX
T
Threat Research - Cisco Blogs
人人都是产品经理
人人都是产品经理
C
Cisco Blogs
The GitHub Blog
The GitHub Blog
爱范儿
爱范儿
I
Intezer
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Recent Announcements
Recent Announcements
月光博客
月光博客
Recent Commits to openclaw:main
Recent Commits to openclaw:main
N
News | PayPal Newsroom
Cyberwarzone
Cyberwarzone
B
Blog
博客园 - 聂微东
P
Palo Alto Networks Blog
A
About on SuperTechFans
The Last Watchdog
The Last Watchdog
Scott Helme
Scott Helme
Google DeepMind News
Google DeepMind News
Webroot Blog
Webroot Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
O
OpenAI News
C
Check Point Blog
Hacker News: Ask HN
Hacker News: Ask HN
W
WeLiveSecurity
V
Vulnerabilities – Threatpost
博客园 - 【当耐特】
有赞技术团队
有赞技术团队
A
Arctic Wolf

博客园 - 心的感觉

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>