JS innerText和outerText屬性：讀寫文字

JavaScript 的 innerText 和 outerText 是 IE 的私有屬性，但是沒有被 HTML 5 納入規範。

innerText 屬性

innerText 在指定元素中插入文字內容，如果文字中包含 HTML 字串，將被編碼顯示。

瀏覽器支援狀態：IE 4+、Safari 3+、Chrome 和 Opera 8+。Firefox 提供 textContent 屬性支援相同的功能。支援 textContent 屬性的瀏覽器還有 IE 9+、Safari 3+、Opera 10+ 和 Chrome。

outerText 屬性

outerText 與 innerText 功能相似，但是它能夠覆蓋原有的元素。

範例

下面範例使用 outerText、innerText、outerHTML 和 innerHTML 這 4 種屬性為列表結構中不同列表項插入文字。

 <h1>單擊回答問題</h1>
<ul>
    <li>你好</li>
    <li>你叫什麼？</li>
    <li>你是什麼職業？</li>
    <li>你喜歡 JS 嗎？</li>
</ul>
<script>
    ul = document.getElementsByTagName("ul")[0];  //獲取列表結構
    var lis = ul.getElementsByTagName("li");  //獲取列表結構的所有列表項
    lis[0].onclick = function () {  //為第一個列表項係結事件處理常式
        this.innerText = "謝謝";  //替換文字
    }
    lis[1].onclick = function () {  //為第二個列表項係結事件處理常式
        this.innerHTML = "<h2>我叫 C語言中文網</h2>";  //替換HTML文字
    }
    lis[2].onclick = function () {  //為第三個列表項係結事件處理常式
        this.outerText = "我是學生";  //覆蓋列表項標籤及其包含內容
    }
    lis[3].onclick = function () {  //為第四個列表項係結事件處理常式
        this.outerHTML = "<h2>當然喜歡</h2>";  //覆蓋列表項標籤及其包含內容
    }
</script>

演示效果如下所示：

---