zoukankan      html  css  js  c++  java
  • 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!

     

  • 相关阅读:
    PAT 00-自测1. 打印沙漏(20)
    js Ajax
    c语言算法实现
    解决python for vs在vs中无法使用中文
    python排序算法实现:
    2014-4-27 心情
    Sdut 2416 Fruit Ninja II(山东省第三届ACM省赛 J 题)(解析几何)
    Poj 1061 青蛙的约会(扩展欧几里得)
    hrbust 1328 相等的最小公倍数(数论)
    hdu 1286 找新朋友 (欧拉函数)
  • 原文地址:https://www.cnblogs.com/Crystalling/p/6171235.html
Copyright © 2011-2022 走看看