zoukankan      html  css  js  c++  java
  • innerHTML、innerText和outerHTML、outerText的区别

    区别描述如下: 

    innerHTML 设置或获取位于对象起始和结束标签内的 HTML

    outerHTML 设置或获取对象及其内容的 HTML 形式

    innerText 设置或获取位于对象起始和结束标签内的文本

    outerText 设置(包括标签)或获取(不包括标签)对象的文本

    示例代码 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

    <html> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <title>innerHTML、outerHTML和innerText、outerHTML的区别</title> 

        <script language="JavaScript" type="text/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="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   } 

      //.outerText 

      function outerTextDemo()  {  

       test_id4.outerText="<br></br><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> 

    不同之处:  

    简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于: 
    1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
    2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。 

     

  • 相关阅读:
    SD卡镜像系列文件(uImage、zImage、dtb、rbf、uboot、preloader)如何更新到SD卡
    printk()打印的信息没办法在终端显示,那怎么调试驱动呢?
    【动态规划】ybt1301 大盗阿福
    【广度优先搜索】ybt1250 The Castle
    【数论/递归】P1017 进制转换
    【深度优先搜索/字符串】P1019 单词接龙
    4-18整理
    【数据结构】用结构体实现并查集
    【数据结构】图论基础整理
    【数据结构】二叉树基本内容整理(一)
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/6513144.html
Copyright © 2011-2022 走看看