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!

     

  • 相关阅读:
    51nod 1621 花钱买车牌 优先队列
    最大字段和 51nod 1049 水水水水水水水水水水水水
    大数相乘 51nod 1027 水题
    逆序数 51nod 1019 归并 分治
    最长公共子序列 LCS 递归 dp 51Nod 1006
    vc6 字体设置
    自行车维护大全(zz)
    DirectX 9.0 3D游戏开发编程基础 [书评](zz)
    二维线段树
    latex 引用文献 bib
  • 原文地址:https://www.cnblogs.com/Crystalling/p/6171235.html
Copyright © 2011-2022 走看看