JavaScript innerHTML 基本語法
HTMLDOMObject.innertHTML
就像第一段所提到的，innerHTML 常與 getElementById 或 getElementsByName 搭配使用，例如 getElementById("ID").innerHTML 就是非常普遍的一種寫法，取得網頁內的 ID 元素後，即可將想要寫入的字串或 HTML Code 寫入至 ID 元素。JavaScript innerHTML 範例一、變更網頁內的文字
<script type="text/javascript">
function ShowAnswer(){
document.getElementById("AnswerBox").innerHTML='2';
}
</script>
1+1=<span id="AnswerBox">_</span>
<input type="button" value="顯示答案" onclick="ShowAnswer()">
以上範例輸出function ShowAnswer(){
document.getElementById("AnswerBox").innerHTML='2';
}
</script>
1+1=<span id="AnswerBox">_</span>
<input type="button" value="顯示答案" onclick="ShowAnswer()">
1+1=_
範例一開始先寫了一個叫 ShowAnswer 的 function 準備用來顯示答案，當網友按下顯示答案的按鈕（button）後，立即被 onclick 事件監聽到，自動觸發 ShowAnswer 函式，真正的重點就來了，ShowAnswer 函式將會使用 document.getElementById 找到 id 為 AnswerBox 的 span 區域，並透過 innerHTML 將答案寫入 span 區域內，整支程式的運作即完成。JavaScript innerHTML 範例二、變更網頁內的 HTML Code
<script type="text/javascript">
function ChangeFontColor(){
var OriginalFont=document.getElementById("StringFont").innerHTML;
document.getElementById("StringFont").innerHTML='<font color="blue">'+OriginalFont+'</font>';
}
</script>
<p id="StringFont">嘗試將文字變為藍色</p>
<input type="button" value="變更文字顏色" onclick="ChangeFontColor()">
以上範例輸出function ChangeFontColor(){
var OriginalFont=document.getElementById("StringFont").innerHTML;
document.getElementById("StringFont").innerHTML='<font color="blue">'+OriginalFont+'</font>';
}
</script>
<p id="StringFont">嘗試將文字變為藍色</p>
<input type="button" value="變更文字顏色" onclick="ChangeFontColor()">
嘗試將文字變為藍色
JavaScript innerHTML 範例三、根據網友輸入的內容變更網頁
<script type="text/javascript">
function ChangeString(){
var NewStringValue=document.getElementById("StringTextBox").value;
document.getElementById("NewStringBox").innerHTML=NewStringValue;
}
</script>
<p id="NewStringBox">請輸入新的文字來改變這段文字</p>
<input type="text" id="StringTextBox">
<input type="button" value="變更文字" onclick="ChangeString()">
以上範例輸出function ChangeString(){
var NewStringValue=document.getElementById("StringTextBox").value;
document.getElementById("NewStringBox").innerHTML=NewStringValue;
}
</script>
<p id="NewStringBox">請輸入新的文字來改變這段文字</p>
<input type="text" id="StringTextBox">
<input type="button" value="變更文字" onclick="ChangeString()">
請輸入新的文字來改變這段文字
延伸閱讀