動態插入HTML或文字

2021-04-02 11:01:25 字數 1243 閱讀 2288

實現web頁面內容動態改變的dhtml操作

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

2. insertadjacenttext只能插入普通文字,insertadjacenthtml插入html格式的文字

3. 用insertadjacenthtml插入指令碼,必須在script元素中使用defer屬性,否則指令碼執行將出現執行期錯誤

4.insertadjacenthtml插入html元素後,all以及其他可能的元素集合將自動更新以反應動態變化。如頁面後續元素的sourceindex 屬性將改變。

5.當賦予inserthtml/outerhtml屬性無效的html標籤,該方法可能出現執行時錯。如以下**將出錯:

此外頁面內容動態操作還需要注意如下一些細節:

1.只有文件body內顯示的內容能被以上屬性和方法動態改變,body物件的內容能被動態操作,但body物件本身無法被替換。

2.以上屬性和方式不能操作空標籤(沒有內容的html標籤),如input,img。

3.對於table物件而言,只有td(innerhtml/innertext)和table(outerhmtl/outertext)物件可以用某些屬性來替換或插入內容;而其他table物件,如tr、tbody不能用這些屬性來改變內容。

動態插入HTML或文字

動態插入html或文字 實現web頁面內容動態改變的dhtml操作 ie的dhtml物件提供了四個可讀寫的屬性來動態操作頁面元素的內容 innertext,outertext,innerhtml,outerhtml.需注意兩點 1.其中innertext,outertext屬性的值是作為普通文字呈現...

JQuery實現動態插入HTML模組

啦啦啦 新增到父級中所有子元素的最前面 p 啦啦 啦 app endt o p 啦啦 啦 app endt o wrap 新增到父級中所有子元素的最前面 prepend wrap prepend 啦啦啦 新增到父級中所有子元素的最前面 prependto p 啦啦 啦 pre pend to 啦啦啦...

mysql 動態插入 MySql條件插入動態值

所以在我解釋我的問題之前,這裡有一些 定義,以幫助說明我的問題 holds data about different memberships create table if not exists member types id int unsigned not null auto increment...

HTML插入空格 HTML多個空格 HTML實體

讀者可能不知道html裡面有個概念叫做 html實體 這裡就對其進行粗略地講解一下 html實體 在 html 中,某些字元是預留的。在 html 中不能使用小於號 和大於號 這是因為瀏覽器會誤認為它們是標籤。如果希望正確地顯示預留字元,我們必須在 html 源 中使用字元實體 character ...

動態新增html

多瀏覽器情況下,動態新增html文字時會出現無法獲取動態插入的內容,需要改動.html 方法。textarea無法通過id進行賦值,換用 其他方式。同時,由於 動態新增文字時,firefox 用innertext 在頁面上看不到文字,故使用innerhtml 對textarea進行賦值 functi...