JavaScript innerHTML

JavaScript 的 innerHTML 其實屬於 HTML DOM 的一種功能,透過 innerHTML 可以取得或設定 HTML Code 中的元素,也可以單純的將字串寫入 HTML Code 的某一個部分,innerHTML 可以搭配 HTML 的 Element Object 來執行,如 getElementByIdgetElementsByName 等,innerHTML 也是網頁設計師常用來設計與網友互動的網頁特效方法,所有主流的瀏覽器都支援 JavaScript innerHTML 功能。

JavaScript innerHTML 基本語法
HTMLDOMObject.innertHTML
就像第一段所提到的,innerHTML 常與 getElementByIdgetElementsByName 搭配使用,例如 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()">
以上範例輸出
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()">
以上範例輸出

嘗試將文字變為藍色

當網友按下變更文字顏色的按鈕,立即觸發 ChangeFontColor 函式,ChangeFontColor 的第一行先設定一個變數 OriginalFont,用來存放原本的字串內容,透過 innerHTML 即可取得原本 id 為 StringFont 的內容,接著第二行是將原本的文字加上 HTML font 文字顏色修改語法,一同寫入至 id 為 StringFont 的 span 區域內,即完成文字顏色的變更,同樣的技巧也可以應用在變更其他網頁內的 HTML Code。

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()">
以上範例輸出

請輸入新的文字來改變這段文字

此範例與上個範例有點類似,最大的差別在於要先取得網友所輸入的文字內容,所以我們先透過 document.getElementById 的 value 方式取得文字輸入欄位(input text)的內容,並將取得的內容存為變數 NewStringValue,接著就與上面的範例一樣,透過 innerHTML 將取得的新內容寫入至 id 為 NewStringBox 的 span 區域內,此技巧為 HTML Form 表單設計時常用的技巧。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C