動態插入HTML或文字

2021-04-20 09:50:36 字數 1274 閱讀 9383

動態插入html或文字

實現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或文字

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

JQuery實現動態插入HTML模組

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

js設定游標插入文字和HTML

在乙個textarea的某個游標位置插入文字或者在某個編輯器中插入html內容,我最近經常和這些打交道,但總是一團模糊,今天整理一下關於如何插入文字,設定游標,移動游標等操作。一 在textarea某個位置插入文字 function insertatcursor myfield,myvalue mo...