innerHTML使用方法

標籤：style   io   color   ar   使用   sp   java   div   on   

使用方法：

比方在<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>

 

innerHTML使用方法