• innerHTML属性


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>document.getElementById</title>
    </head>
    <body>
    <p id="con">您好!</p>
    <script type="text/javascript">
    var mychar=document.getElementById("con");
    document.write("结果:"+mychar); //输出获取的P标签。
    </script>
    </body>
    </html>

    结果是:

    如果改为:var mychar=document.getElementById("con").innerHTML;

    结果就是:

     原因是:前者获取到的是整个对象,后者是获取到其中的内容

    ---------------------------------------------------------------------------------------------------------------------------------

    由比如,将代码改为如下顺序

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>document.getElementById</title>

    <script type="text/javascript">
    var mychar=document.getElementById("con").innerHTML;
    document.write("结果:"+mychar); //输出获取的P标签。 
    </script>

    </head>
    <body>
    <p id="con">您好!</p>
    </body>
    </html>

     结果就是:null

    原因是:代码是顺序执行的,先调用了JavaScript代码,但是这个时候还没有ID为“con”的元素,得到空

    ----------------------------------------------------------------------------------------------------------------------

    innerHTML属性用于获取或替换HTML元素的内容。语法为:object.innerHTML  (注意:区分大小写)

    示例:

    <html>

    <head>.....</head>

    <body>

    <h2 id="con">原始标题</H2>

    <script type="text/javascript">
    var mychar=document.getElementById("con"); ;
    document.write("原标题:"+mychar.innerHTML+"<br>"); 

    mychar.innerHTML="Hello World!"
    document.write("修改后的标题:"+mychar.innerHTML); 
    </script>

    </body>

    </html>

    结果:原标题:原始标题

            修改后的标题:Hello World!

     

  • 相关阅读:
    check datagurad scripts using python
    nagios check_oracle plugin (add check temp tablespace)
    monitor tomcat sctips
    ATM 练习
    socket 练习 ftp
    socket 练习 sendcommand
    带你走进虚拟化世界之kvm(转载)
    luogu2732商店购物
    uva1625颜色的长度
    luogu3147 [USACO16OPEN]262144
  • 原文地址:https://www.cnblogs.com/Crystalling/p/6171235.html
Copyright © 2020-2023  润新知