innerHTML用法

昵稱15242507 2014-04-29

展開全文

用法：

比如在<body>中寫了如下的代碼：
<div id=top></div>

現(xiàn)在用top.innerHTML="..........";的方法就可以向這個id的位置寫入HTML代碼了。
例如top.innerHTML="<input type="button" name="我很帥" value="說的對">";就可以在top對應的位置出現(xiàn)一個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>"; //可以這樣動態(tài)修改，純文字格式
document.all.div1.innerHTML="<font color=#ff0000>AAA</font>"; //HTML格式，動態(tài)生成一個表格也行
</script>

（1）對div標簽的控制

div標簽跟span標簽是不一樣的，div是一個層的塊，span是一行，我們下面看演示就知道區(qū)別了。先來看一段控制div的代碼。

DIV塊測試：<div id="div1">默認值</div>

運行的時候，點擊“改變值為1”那么“默認值”這個內(nèi)容將會被改變?yōu)椤爸禐?”，但是注意其中的界面，就是會發(fā)現(xiàn)“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行測試：

當點擊“改變值為1”的時候，“默認值”將變?yōu)椤爸禐?”，但是“Span行測試”和“默認值”是在同一行顯示的，跟DIV不一樣。

另外一個值得注意的就是，不管是div還是span，后面的名字都是以為id來定義的，不是象表單一樣是使用name來定義的。

用innerHTML這樣就可以實現(xiàn)動態(tài)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>

http://blog.csdn.net/l_courser/article/details/2156057