最近在學習JavaScript，覺得innerHTML和innerText太有用了，利用它們，我們可以試自己的網頁實現動態化。不過在使用的過程中，千萬要注意它們的大小寫，因爲錯一點您就得不到預期的效果了。這是全新的方法，掌握它以後將可隨心所欲的設計動態內容了。
一 動態改變文本和Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type content="text/html;charset=UTF-8">
<title>innerText和innerHTML用法實例</title>
<script language="JavaScript" type="text/javascript">
function changeText() {
DT.innerText="我很好!";
}//function
function changeHtml() {
DH.innerHTML="<i><u>我姓肖!</u></i>";
}//function
function back() {
DT.innerText="您好嗎?";
DH.innerHTML="您姓什麼?";
}
</script>
</head>
<body>
<p><font color="gray">請點擊下邊的文字……</font>
<ul>
<li id="DT" onclick="changeText()">您好嗎? </li>
<li id="DH" onclick="changeHtml()">您姓什麼? </li>
<li onclick="back()">恢復原樣! </li>
</ul>
</body>
</html> innerText屬性用來定義對象所要輸出的文本，在本例中innerText把對象DT中的文本“您好嗎?”變成了“我很好!”（語句DT.innerText="我很好!"）。而對對象DH的改變用了innerHTML屬性，它除了有innerText的作用外，還可改變對象DH內部的HTML語句，於是它把文本變成了“我姓肖!”，而且文本輸出改成了斜體（<i></i>）並下加一條直線（<u></u>），即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。
二 文本的動態輸入與輸出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用innerText和innerHTML製作動態網頁</title>
<style type="css/text">
.blue {
color:blue;
font-size:12pt;
}
</style>
<script language="JavaScript" type="text/javascript">
function OutputText() {
if(frm.txt.text!="") {
Output.innerHTML="在此處輸出文本：<u>"+frm.txt.value+"</u>";} //Output爲一對象。
else {
Output.innerText="在此處輸出文本：";}
}//function
</script>
</head>
<body>
<p><br></p>
<form name="frm">
<p>
<font color="gray">請在文本框中輸入文字:</font>
<input type="text" name="txt" size="50">
<br>
<input type="button" value="輸出文本" name="B1" class="blue" onclick="OutputText()">
</p>
</form>
<p id="Output">
在此處輸出文本：
</p>
</body>
</html> 此例的效果是先在文本框中輸入文本，然後按“輸出文本”的按鈕，接着網頁便會自動輸出您所輸入的文本
三 注意innerHTML有自動檢查語法的功能,它會把不完整的HTML代碼補充完整,這點可以說是神奇,例如下面的這段腳本
function Get()
{
document.getElementById("tab").innerHTML="<table><tr>";
alert(document.getElementById("tab").innerHTML);
} 運行的效果竟然是這樣的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
所以請各位在使用時一定要小心.
例如在做這樣的操作時就會出錯.
運行的效果竟然是這樣的:
list.innerHTML="<table><tr>";
list.innerHTML+="<td>"
............ 必須用一箇中間變量
var html="<table><tr>";
html+="<td>";
.........
list.innerHTML=html; 這樣問題就可以得到解決.