innerText, outerText, innerHTML, outerHTML,insertAdjacentText
IE的DHTML對象提供了四個(gè)可讀寫(xiě)的屬性來(lái)動(dòng)態(tài)操作頁(yè)面元素的內容:innerText, outerText, innerHTML, outerHTML.
需注意兩點(diǎn):
1. 其中innerText,outerText屬性的值是作為普通文本呈現的,即使它含有HTML標簽也如實(shí)反應出來(lái);而innerHTML, outerHTML呈現的是經(jīng)HTML引擎解析后文本,它可以反應屬性中HTML標簽的表現效果。
2. 對對象的outerText,outerHTML屬性賦值(即寫(xiě)操作)會(huì )刪除該對象。
以上四個(gè)屬性的賦值操作只是替換原對象的文本內容,想要在頁(yè)面中指定元素相關(guān)位置新增文本內容,需采用insertAdjacentHTML和insertAdjacentText方法。形式如下:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
其中 sWhere 表示插入的文本相對于html標簽的位置,有如下四個(gè)預設值:
beforeBegin,afterBegin,beforeEnd,afterEnd
使用中需注意如下幾點(diǎn):
1.這兩種方法必須在整個(gè)文檔裝載完成之后才能使用,否則將出錯。
2. InsertAdjacentText只能插入普通文本,InsertAdjacentHTML插入html格式的文本
3. 用InsertAdjacentHTML插入腳本,必須在script元素中使用defer屬性,否則腳本執行將出現運行期錯誤
4.InsertAdjacentHTML插入html元素后,all以及其他可能的元素集合將自動(dòng)更新以反應動(dòng)態(tài)變化。如頁(yè)面后續元素的sourceIndex 屬性將改變。
5.當賦予InsertHTML/outerHTML屬性無(wú)效的HTML標簽,該方法可能出現運行時(shí)錯。如以下代碼將出錯:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="javascript">
pdiv.innerHTML = "<p>hello</p>"
</SCRIPT>
</BODY>
此外頁(yè)面內容動(dòng)態(tài)操作還需要注意如下一些細節:
1.只有文檔BODY內顯示的內容能被以上屬性和方法動(dòng)態(tài)改變,BODY對象的內容能被動(dòng)態(tài)操作,但BODY對象本身無(wú)法被替換。
2.以上屬性和方式不能操作空標簽(沒(méi)有內容的html標簽),如input,img。
3.對于table對象而言,只有td(innerHTML/innerText)和table(outerHMTL/outerText)對象可以用某些屬性來(lái)替換或插入內容;而其他table對象,如tr、tbody不能用這些屬性來(lái)改變內容。