zoukankan      html  css  js  c++  java
  • innerHTML使用方法

    使用方法:

    比方在<body>中写了例如以下的代码:
    <div id=top></div>

    如今用top.innerHTML="..........";的方法就能够向这个id的位置写入HTML代码了。
    比如top.innerHTML="<input type="button" name="我非常帅" value="说的对">";就能够在top相应的位置出现一个button了!

    爽吧,在公告前加javascript即可老,直接改HTML。。。

    <html>
    <head>
    <script>
    function Test(){
            var str="";
            str+="Hello,";
            str+="This is a Test!<br />";
            str+="I Love you;<br />";
            str+="I Love you,too!";
            p.innerHTML=str+"<br /><br />"+Math.random();
            setTimeout('Test();',1000);
    }
    </script>
    </head>
    <body onload=Test();>
    <span id="p"></span>
    </doby>
    </html>

    innerHTML和innerText有什么作用?

    用javascript能够控制显示一个HTML表单如text,textarea,等里面的文字,
    如: document.all.表单ID.value="ABC";

    但怎样控制在页面上显示的文字呢?

    这时就要用到innerHTML或innerText

    <div id="div1"></div><p>
    <div id="div2"></div>

    <script>
    document.all.div2.innerText="<font color=#ff0000>AAA</font>"; //能够这样动态改动,纯文字格式
    document.all.div1.innerHTML="<font color=#ff0000>AAA</font>"; //HTML格式,动态生成一个表格也行
    </script> 

    (1)对div标签的控制

    div标签跟span标签是不一样的,div是一个层的块,span是一行,我们以下看演示就知道差别了。先来看一段控制div的代码。

    <script language="javascript">
    function chageDiv(number)
    {
     if (number == 1) {
      document.getElementById("div1").innerHTML = "值为1";
     }
     if (number == 2) {
      document.getElementById("div1").innerHTML = "值为2";
     }
    }
    </script>

    DIV块測试:<div id="div1">默认值</div>

    <a href="#" onClick="chageDiv(1)">改变值为1</a> 
    <a href="#" onClick="chageDiv(2)">改变值为2</a>

    执行的时候,点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”,可是注意当中的界面,就是会发现“DIV測试:”和“默认值”是两行显示的,由于DIV是按块来显示的。

    (2)对span的控制

    与div相似,可是它是依照行来显示的,看以下的代码:

    function chageSpan(number)
    {
     if (number == 1) {
      document.getElementById("span1").innerHTML = "值为1";
     }
     if (number == 2) {
      document.getElementById("span1").innerHTML = "值为2";
     }
    }
    </script>


    Span行測试:

    <span id="span1">默认值</span><br>
    <a href="#" onClick="chageSpan(1)">改变值为1</a>
    <a href="#" onClick="chageSpan(2)">改变值为2</a>
     

    当点击“改变值为1”的时候,“默认值”将变为“值为1”,可是“Span行測试”和“默认值”是在同一行显示的,跟DIV不一样。

    另外一个值得注意的就是,无论是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的。

    用innerHTML这样就能够实现动态table的效果:
    <div id=div1></div>
    <input type=button value=Test onclick=InsertHtml()>
    <script language=JScript>
    var strHTML = "<Table><Tr>";
    strHTML += "<Td bgColor=#000000 Height=100px Width=100px>fadsf</Td>";
    strHTML += "</Tr></Table>";
    function InsertHtml()
    {
    document.all.div1.innerHTML = strHTML;
    }
    </script>

     
  • 相关阅读:
    为什么电影里的黑客都不屑用鼠标? (转)
    专注做好一件事(转) focus---这个世界上最成功的人,他们在某一领域获得成功之后,可通过经营杠杆进入任何他们想要涉足的领域。而这都得依赖于他们曾极致的专注在做好一件事情上。
    世间万物都是遵循某种类似的规律,谁先把握了这些规律,谁就最早成为了强者。
    走的时候不要太急,有时间要停下来想一想当初为什么而走,这样,才会走的更稳,走的更明白。
    Android笔记: Android版本号
    Android笔记:真机调试无法输出Log 信息的问题
    阿里云服务器试用
    Android笔记:利用InputStream和BufferedReader 进行字节流 字符流处理
    Android笔记:java 中的数组
    Android笔记:C memory copy
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4094476.html
Copyright © 2011-2022 走看看