﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-业精于勤荒于嬉！-随笔分类-Javascript</title><link>http://www.blogjava.net/luofeng225/category/38595.html</link><description>生于忧患，死于安乐。</description><language>zh-cn</language><lastBuildDate>Sat, 28 Mar 2009 08:26:49 GMT</lastBuildDate><pubDate>Sat, 28 Mar 2009 08:26:49 GMT</pubDate><ttl>60</ttl><item><title>js中innerHTML与innerText的用法与区别 </title><link>http://www.blogjava.net/luofeng225/archive/2009/03/28/262593.html</link><dc:creator>luofeng225</dc:creator><author>luofeng225</author><pubDate>Sat, 28 Mar 2009 06:09:00 GMT</pubDate><guid>http://www.blogjava.net/luofeng225/archive/2009/03/28/262593.html</guid><wfw:comment>http://www.blogjava.net/luofeng225/comments/262593.html</wfw:comment><comments>http://www.blogjava.net/luofeng225/archive/2009/03/28/262593.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/luofeng225/comments/commentRss/262593.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/luofeng225/services/trackbacks/262593.html</trackback:ping><description><![CDATA[<div class="postTitle"><a class="postTitle2" id="viewpost1_TitleUrl" href="http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.html"><span style="color: #1a8bc8">js中innerHTML与innerText的用法与区别</span></a> </div>
<div>
<p>用法：<br />
<br />
&lt;div&nbsp;id="test"&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;span&nbsp;style="color:red"&gt;test1&lt;/span&gt;&nbsp;test2<br />
&lt;/div&gt;<br />
<br />
在JS中可以使用：<br />
<br />
<strong>test.innerHTML</strong>:</p>
<p>　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 </p>
<p>　　上例中的test.innerHTML的值也就是&#8220;&lt;span&nbsp;style="color:red"&gt;test1&lt;/span&gt;&nbsp;test2 &#8221;。<br />
<br />
<strong>test.innerText:</strong>&nbsp;</p>
<p>　　从起始位置到终止位置的内容,&nbsp;但它去除Html标签&nbsp;</p>
<p>　　上例中的text.innerTest的值也就是&#8220;test1&nbsp;test2&#8221;,&nbsp;其中span标签去除了。 </p>
<p><strong>test.outerHTML:</strong></p>
<p><strong>　　</strong>除了包含innerHTML的全部内容外,&nbsp;还包含对象标签本身。</p>
<p>　　上例中的text.outerHTML的值也就是&lt;div&nbsp;id="test"&gt;&lt;span&nbsp;style="color:red"&gt;test1&lt;/span&gt;&nbsp;test2&lt;/div&gt;</p>
<p><strong><br />
完整示例：</strong></p>
<p>&lt;div&nbsp;id="test"&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;span&nbsp;style="color:red"&gt;test1&lt;/span&gt;&nbsp;test2<br />
&lt;/div&gt;<br />
<br />
&lt;a href="javascript:alert(test.innerHTML)"&gt;innerHTML内容&lt;/a&gt;<br />
&lt;a href="javascript:alert(test.innerText)"&gt;inerHTML内容&lt;/a&gt;<br />
&lt;a href="javascript:alert(test.outerHTML)"&gt;outerHTML内容&lt;/a&gt;<br />
<br />
<strong>特别说明：</strong></p>
<p><strong>　　</strong>innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>HTML标签，下面是一个简单的符合W3C标准的示例：<br />
<br />
&lt;a href="javascript:alert(document.getElementById('test').innerHTML.replace(/&lt;.+?&gt;/gim,''))"&gt;无HTML,符合W3C标准&lt;/a&gt;</p>
</div>
 <img src ="http://www.blogjava.net/luofeng225/aggbug/262593.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/luofeng225/" target="_blank">luofeng225</a> 2009-03-28 14:09 <a href="http://www.blogjava.net/luofeng225/archive/2009/03/28/262593.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>