JavaScript innerText

JavaScript innerText 與 innerHTML 有點類似,差別在於 innerText 會過濾掉字串中的 HTML 標籤,例如透過 innerText 取得網頁中的特定元素值 <p>字串</p> 的結果是僅有「字串」,而 HTML 標籤 <p> 與 </p> 則會被過濾掉,範例有詳細的呈現方式。

JavaScript innerText 基本語法
HTMLDOMObject.innerText
innerHTML 的基本語法類似,但 innerText 僅適用於 IE 瀏覽器。

JavaScript innerText 範例
<script type="text/javascript">
function FindValue(){
    var ShowString=document.getElementById("TestBox").innerText;
    document.getElementById("ShowBox").innerText=ShowString;
}
</script>
<div id="TestBox" onclick="FindValue()">
    <font color='blue'>This is test string.</font>
</div>
<div id="ShowBox"></div>
以上範例輸出
This is test string.
This is test string.
範例預先準備了一個顏色為藍色的字串放在 id 為 TestBox 的 DIV 區塊內,並透過 onclick 事件監聽與觸發 FundValue 函式,所以範例的運作就是當點選藍色的範例字串,就會自動跳出下方的黑色字串,文字內容是一樣的,但文字的顏色卻不一樣,主要原因是因為 innerText 將 HTML font 標籤過濾掉了。FindValue 函式內僅有兩行程式碼,第一行是透過 DOMgetElementById 方式取得 DIV 區塊內的所有字元,當然也包含範例中的 font 標籤,由於採用的是 innerText,所以取得的字元將被過濾掉 HTML 標籤,才存入變數 ShowString 內,第二行程式碼則是將第一行取得的變數值,透過 innerText 的方式寫入 id 為 ShowBox 的 DIV 區塊內,需注意的是此範例僅有 IE 瀏覽器能使用。

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