DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> 實現Web頁面內容動態改變的dhtml操作
實現Web頁面內容動態改變的dhtml操作
編輯:關於HTML     

IE的DHTML對象提供了四個可讀寫的屬性來動態操作頁面元素的內容:innerText, outerText, innerHTML, outerHTML.

  需注意兩點:

  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.這兩種方法必須在整個文檔裝載完成之後才能使用,否則將出錯。www.hanwangtx.com

  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不能用這些屬性來改變內容。www.hanwangtx.com

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved