DOM中的innerHTML、innerText和outerHTML、outerText的区别[转]

DOM中的innerHTML、innerText和outerHTML、outerText的区别[转]

本文转自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设置包括标签在内的文本。

你可能感兴趣的:(DOM中的innerHTML、innerText和outerHTML、outerText的区别[转])