温馨提示:您的每一次转载,体现了我写此文的意义!!!烦请您在转载时注明出处http://www.blogjava.net/sxyx2008/谢谢合作!!!

雪山飞鹄

温馨提示:您的每一次转载,体现了我写此文的意义!!!烦请您在转载时注明出处http://www.blogjava.net/sxyx2008/谢谢合作!!!

BlogJava 首页 新随笔 联系 聚合 管理
  215 Posts :: 1 Stories :: 674 Comments :: 0 Trackbacks

本文转自http://xphnet.hpsbhq.com/paperdetail.aspx?paperid=31

      1、功能讲解:
  innerHTML 设置或获取位于对象起始和结束标签内的 HTML
  outerHTML 设置或获取对象及其内容的 HTML 形式
  innerText 设置或获取位于对象起始和结束标签内的文本
  outerText 设置(包括标签)或获取(不包括标签)对象的文本
  2、示例代码(可直接复制后转存执行):
  <html>
  <head>
  <title>Demo</title>
  <style><!--
  body {font-family:"宋体";color="blue";font-size="9pt"}
  --> </style>
  <script language="JavaScript">
  //.innerHTML
  function innerHTMLDemo()
  {
   test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
  }
  //.innerText
  function innerTextDemo()
  {
   test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
  }
  //.outerHTML
  function outerHTMLDemo()
  {
   test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
  }
  //.outerText
  function outerTextDemo()
  {
   test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
  }
  </script>
  </head>
  <body>
  <ul>
  <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
  <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
  <li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
  <li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
  </ul>
  </body>
  </html>
  3、不同之处:
  简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:
  1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
  2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。

posted on 2010-11-03 10:38 雪山飞鹄 阅读(2009) 评论(2)  编辑  收藏 所属分类: js

Feedback

# re: DOM中的innerHTML、innerText和outerHTML、outerText的区别[转] 2010-11-03 17:29 小六夜疯狂
看了很不错啊!谢谢啊!
是否能写一点它们应用啊!XMLDom或HTMLDom。  回复  更多评论
  

# re: DOM中的innerHTML、innerText和outerHTML、outerText的区别[转][未登录] 2011-12-07 13:45 1
1  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: