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種屬性為列表結構中不同列表項插入文本。
<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種屬性為列表結構中3、同列表 項插入文本,演示效果如圖25.4所示。
<hl>單擊回答問題</hl>
<ul>
<li> 你好 </li>
<li>你叫什么? </li>
<li>你干什么? </li>
<1;1>你喜歡 JS 嗎? </li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]; //獲取列表結構
var lis = ul.getElementsByTagName("li"); //獲取列表結構的所有列表項
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>
點擊加載更多評論>>