實現Web頁面內容動態改變的dhtml操作
需注意兩點:
1. 其中innerText,outerText屬性的值是作為普通文字呈現的,即使它含有HTML標籤也如實反應出來;而innerHTML, outerHTML呈現的是經HTML引擎解析後文本,它可以反應屬性中HTML標籤的表現效果。
2. 對物件的outerText,outerHTML屬性賦值(即寫操作)會刪除該物件。
以上四個屬性的賦值操作只是替換原物件的文字內容,想要在頁面中指定元素相關位置新增文字內容,需採用insertAdjacentHTML和insertAdjacentText方法。形式如下:
以下是引用片段: object.insertAdjacentText(sWhere, sText) object.insertAdjacentHTML(sWhere, sText) |
其中 sWhere 表示插入的文字相對於html標籤的位置,有如下四個預設值:
以下是引用片段: beforeBegin,afterBegin,beforeEnd,afterEnd |
使用中需注意如下幾點:
1.這兩種方法必須在整個文件裝載完成之後才能使用,否則將出錯。
2. InsertAdjacentText只能插入普通文字,InsertAdjacentHTML插入html格式的文字
3. 用InsertAdjacentHTML插入指令碼,必須在script元素中使用defer屬性,否則指令碼執行將出現執行期錯誤
4.InsertAdjacentHTML插入html元素後,all以及其他可能的元素集合將自動更新以反應動態變化。如頁面後續元素的sourceIndex 屬性將改變。
5.當賦予InsertHTML/outerHTML屬性無效的HTML標籤,該方法可能出現執行時錯。如以下程式碼將出錯:
以下是引用片段: <BODY> <p id=pdiv></p> <SCRIPT LANGUAGE="JavaScript"> pdiv.innerHTML = "<p>hello</p>" </SCRIPT> </BODY> |
此外頁面內容動態操作還需要注意如下一些細節:
1.只有文件BODY內顯示的內容能被以上屬性和方法動態改變,BODY物件的內容能被動態操作,但BODY物件本身無法被替換。
2.以上屬性和方式不能操作空標籤(沒有內容的html標籤),如input,img。
3.對於table物件而言,只有td(innerHTML/innerText)和table(outerHMTL/outerText)物件可以用某些屬性來替換或插入內容;而其他table物件,如tr、tbody不能用這些屬性來改變內容。