0
点赞
收藏
分享

微信扫一扫

innerText,innerHTML的用法以及注…

做个橙梦 2022-09-16 阅读 165


innerText,innerHTML的用法以及注意事项



我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是:innerText,outerText,innerHTML,outerHTML,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。
一:动态改变文本和Html

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <htmlxmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5. <title>Demo1</title>
    6. <styletype="text/css">
    7. p {
    8. color:gray;
    9. }
    10. </style>
    11. <scriptlanguage="javascript">
    12. function changeText()
    13. {
    14. //innerText属性只能改变HTML内的文本内容,并且支持IE下使用
    15. DT.innerText="我很好";
    16. }
    17.
    18. function changeHtml()
    19. {
    20. //innerHTML符合W3C标准,可以在任何浏览器下使用,并且可以改变独享DH内部的HTML语句
    21. DH.innerHTML="<i><u><strong>我姓肖</strong></u></i>";
    22.
    23. //火狐下只支持以下写法,并不支持在Javascript脚本中直接使用对象名来操作对象
    24. //document.getElementByIdx_x("DH").innerHTML="<i><u><strong>我姓肖</strong></u></i>";
    25. }
    26.
    27. function back()
    28. {
    29. DT.innerText="你好吗?";
    30. DH.innerHTML="你姓啥?";
    31. }
    32. </script>
    33. </head>
    34. <body>
    35. <p>请点击下边的文字.....
    36. <p>
    37. <ul>
    38. <liid="DT" onclick="changeText()">你好吗?</li>
    39. <liid="DH" onclick="changeHtml()">你姓啥?</li>
    40. <lionclick="back()">恢复原样</li>
    41. </ul>
    42. </body>
    43. </html>



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo1</title>
    <style type="text/css">
    p {
    color:gray;
    }
    </style>
    <script language="javascript">
    function changeText()
    {
    //innerText属性只能改变HTML内的文本内容,并且支持IE下使用
    DT.innerText="我很好";
    }

    function changeHtml()
    {
    //innerHTML符合W3C标准,可以在任何浏览器下使用,并且可以改变独享DH内部的HTML语句
    DH.innerHTML="<i><u><strong>我姓肖</strong></u></i>";

    //火狐下只支持以下写法,并不支持在Javascript脚本中直接使用对象名来操作对象
    //document.getElementByIdx_x("DH").innerHTML="<i><u><strong>我姓肖</strong></u></i>";
    }

    function back()
    {
    DT.innerText="你好吗?";
    DH.innerHTML="你姓啥?";
    }
    </script>
    </head>
    <body>
    <p>请点击下边的文字.....
    <p>
    <ul>
    <li id="DT" οnclick="changeText()">你好吗?</li>
    <li id="DH" οnclick="changeHtml()">你姓啥?</li>
    <li οnclick="back()">恢复原样</li>
    </ul>
    </body>
    </html>



    innerText属性用来定义对象所要输出的文本,在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”(语句DT.innerText="我很好!")。而对对象DH的改变用了innerHTML属性,它除了有innerText的作用外,还可改变对象DH内部的HTML语句,于是它把文本变成了“我姓肖!”,而且文本输出改成了斜体(<i></i>)并下加一条直线(<u></u>),即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用,读者不妨自己试试看。

    二:文本的动态输入与输出



    innerText,innerHTML的用法以及注…_html


    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <htmlxmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5. <title>Demo2</title>
    6. <styletype="text/css">
    7. p {
    8. color:gray;
    9. }
    10. body {
    11. font-family:宋体;
    12. color:blue;
    13. font-size:9pt;
    14. }
    15. .blue {
    16. color:blue;
    17. font-size:9pt;
    18. }
    19. </style>
    20. <scriptlanguage="javascript">
    21. function OutputText(){
    22. var txt=document.getElementById("txt").value;
    23. if(txt!=""){
    24. output.innerHTML="在此输出文本:<u>"+txt+"</u>"
    25. }else{
    26. output.innerHTML="在此输出文本:";
    27. }
    28. }
    29. </script>
    30. </head>
    31. <body>
    32. <formid="frm">
    33. <p>请输入文本框中输入文字:
    34. <inputtype="text" name="txt" size="50"/>
    35. <inputtype="button" value="输出文本" class="blue" onclick="OutputText()"/>
    36. </p>
    37. <pid="output">在此输出文本:</p>
    38. </form>
    39. </body>
    40. </html>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo2</title>
    <style type="text/css">
    p {
    color:gray;
    }
    body {
    font-family:宋体;
    color:blue;
    font-size:9pt;
    }
    .blue {
    color:blue;
    font-size:9pt;
    }
    </style>
    <script language="javascript">
    function OutputText(){
    var txt=document.getElementByIdx_x("txt").value;
    if(txt!=""){
    output.innerHTML="在此输出文本:<u>"+txt+"</u>"
    }else{
    output.innerHTML="在此输出文本:";
    }
    }
    </script>
    </head>
    <body>
    <form id="frm">
    <p> 请输入文本框中输入文字:
    <input type="text" name="txt" size="50"/>
    <input type="button" value="输出文本" class="blue" οnclick="OutputText()"/>
    </p>
    <p id="output"> 在此输出文本: </p>
    </form>
    </body>
    </html>



    此例的效果是先在文本框中输入文本,然后按“输出文本”的按钮,接着网页便会自动输出您所输入的文本

    三:注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本



    innerText,innerHTML的用法以及注…_html


    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <htmlxmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5. <title>Demo3</title>
    6. <scriptlanguage="javascript">
    7. function Get(){
    8. var tab=document.getElementById("tab")
    9. tab.innerHTML="<table><tr>";
    10. alert(tab.innerHTML);
    11. }
    12. </script>
    13. </head>
    14. <body>
    15. <pid="tab" onclick="Get()">
    16. 请点我啦!!!
    17. </p>
    18. </body>
    19. </html>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo3</title>
    <script language="javascript">
    function Get(){
    var tab=document.getElementByIdx_x("tab")
    tab.innerHTML="<table><tr>";
    alert(tab.innerHTML);
    }
    </script>
    </head>
    <body>
    <p id="tab" οnclick="Get()">
    请点我啦!!!
    </p>
    </body>
    </html>



    运行的效果竟然是这样的:
    <TABLE><TBODY><TR></TR></TBODY></TABLE>

    如图:

    innerText,innerHTML的用法以及注…_3c_03


    所以请各位在使用时一定要小心.

    例如在做这样的操作时就会出错.


    innerText,innerHTML的用法以及注…_html

    1. list.innerHTML="<table><tr>";
    2.
    3. list.innerHTML+="<td>"


    list.innerHTML="<table><tr>";list.innerHTML+="<td>"


     

    必须用一个中间变量


    innerText,innerHTML的用法以及注…_html


      1. var html="<table><tr>";
      2.
      3. html+="<td>";
      4.
      5.
      6.
      7. list.innerHTML=html;


      var html="<table><tr>";html+="<td>";

      list.innerHTML=html;


      这样问题就可以得到解决.

      另外:

      innerText在火狐下是不支持的,在网上有这种有人这么做

      innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

      <a href="javascript:alert(document.getElementByIdx_x('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

      举报

      相关推荐

      0 条评论