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!

     

  • 相关阅读:
    关于自适应屏幕方向和大小的一些经验
    在线升级Android应用程序完善版
    H263&H264&MPEG4
    PyCharm2019 激活
    VMware Workstation下载安装破解秘钥
    linux/kali安装及更新源以及输入法等配置
    python推倒式(列表、字典、集合)
    协程
    Flask中获取参数(路径,查询,请求体,请求头)
    Flask中获取参数(路径,查询,请求体,请求头)
  • 原文地址:https://www.cnblogs.com/Crystalling/p/6171235.html
Copyright © 2011-2022 走看看