JavaScript 讀寫文本

■知識點

    innerText和outerText也是IE的私有屬性，但是沒有被HTML5納入規(guī)范。

    innerText在指定元素中插入文本內(nèi)容，如果文本中包含HTML字符串，將被編碼顯示。

    瀏覽器支持狀態(tài)：IE4+、Safari 3+、Chrome和Opera 8+。Firefox提供/ textContent屬性支持相同的功能。支持 textContent 屬性的瀏覽器還有 IE9+、Safari 3+、Opera 10+和 Chrome。

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

■實例設計

下面的示例使用outerText、innerText、outerHTML和innerHTML這4種屬性為列表結(jié)構(gòu)中不同列表項插入文本。

<hl>單擊回答問題</hl>

<ul>

    <li> 你好 </li>

    <li>你叫什么？ </li>

    <li>你干什么？ </li>

    <li>你喜歡 JS 嗎？ </li>

</ul>

<script>

var ul = document.getElementsByTagName(nuln)[0];  ■實例設計

下面的示例使用outerText、innerText、outerHTML和innerHTML這4種屬性為列表結(jié)構(gòu)中3、同列表 項插入文本，演示效果如圖25.4所示。

<hl>單擊回答問題</hl>

<ul>

<li> 你好 </li>

<li>你叫什么？ </li>

<li>你干什么？ </li>

<1;1>你喜歡 JS 嗎？ </li>

</ul>

<script>

var ul = document.getElementsByTagName("ul")[0];    //獲取列表結(jié)構(gòu)

var lis = ul.getElementsByTagName("li");                       //獲取列表結(jié)構(gòu)的所有列表項

lis[0].onclick = function(){                                          //為第1個列表項綁定事件處理函數(shù)

    this.innerText ="謝謝";                                           //替換文本

}

lis [1] .onclick = function(){                                        //為第2個列表項綁定事件處理函數(shù)

    this.innerHTML = "<h2>我是一名初學者</h2>";   //替換HTML文本

}

lis[2].onclick = function () {                                        //為第3個列表項綁定事件處理函數(shù)

    this.outerText = "我是學生";                                   //覆蓋列表項標簽及其包含內(nèi)容

}

lis[3].onclick = function(){                                          //為第4個列表項綁定事件處理函數(shù)

    this. outerHTML = "<h2> 當然喜歡</h2>";           //覆蓋列表項標簽及其包含內(nèi)容

}

</script>