insertAdjacentHTML動態插入行

2021-08-29 08:54:03 字數 1429 閱讀 7378

新增html內容與文字內容以前用的是innerhtml與innertext方法,最近發現還有insertadjacenthtml和insertadjacenttext方法,這兩個方法更靈活,可以在指定的地方插入html內容和文字內容

insertadjacenthtml方法:在指定的地方插入html標籤語句

原型:insertadajcenthtml(swhere,stext)

引數:swhere: 指定插入html標籤語句的地方,有四種值可用:

1. beforebegin: 插入到標籤開始前

2. afterbegin:插入到標籤開始標記之後

3. beforeend:插入到標籤結束標記前

4. afterend:插入到標籤結束標記後

stext:要插入的內容

更多..." οnclick="myfun()">

=============================

原來的內容

=================================

用法:test1test2

在js中可以使用:

test.innerhtml:

也就是從物件的起始位置到終止位置的全部內容,包括html標籤。

上例中的test.innerhtml的值也就是「test1test2 」。

test.innertext:

從起始位置到終止位置的內容,但它去除html標籤

上例中的text.innertest的值也就是「test1test2」,其中span標籤去除了。

test.outerhtml:

除了包含innerhtml的全部內容外,還包含物件標籤本身。

上例中的text.outerhtml的值也就是test1test2

完整示例:

test1test2

innerhtml內容

inerhtml內容

outerhtml內容

特別說明:

innerhtml是符合w3c標準的屬性,而innertext只適用於ie瀏覽器,因此,盡可能地去使用innerhtml,而少用innertext,如果要輸出不含html標籤的內容,可以使用innerhtml取得包含html標籤的內容後,再用正規表示式去除html標籤,下面是乙個簡單的符合w3c標準的示例:

/gim,''))">無html,符合w3c標準

insertAdjacentHTML動態插入行

新增html內容與文字內容以前用的是innerhtml與innertext方法,最近發現還有insertadjacenthtml和 insertadjacenttext方法,這兩個方法更靈活,可以在指定的地方插入html內容和文字內容。insertadjacenthtml方法 在指定的地方插入htm...

insertAdjacentHTML方法示例

新增html內容與文字內容以前用的是innerhtml與innertext方法,最近發現還有insertadjacenthtml和insertadjacenttext方法,這兩個方法更靈活,可以在指定的地方插入html內容和文字內容。insertadjacenthtml方法 在指定的地方插入html...

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

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