js插入元素的新方法insertAdjacentHTML

pinecone 發(fā)布于2019-08-01 17:50 / 1211人閱讀

摘要：下面介紹幾個(gè)新的插入的以上三個(gè)方法分別是用來(lái)向一個(gè)元素中插入文本，字符串格式的代碼結(jié)構(gòu)，以及插入元素這三個(gè)方法的用法基本是一致的。

下面介紹幾個(gè)新的插入DOM的API：

insertAdjacentText
insertAdjacentHTML
insertAdjacentElement

以上三個(gè)方法分別是用來(lái)向一個(gè)DOM元素中插入文本，字符串格式的html代碼結(jié)構(gòu)，以及插入DOM元素；這三個(gè)方法的用法基本是一致的。

insertAdjacentText(position, string);
insertAdjacentHTML(position, htmlstring);
insertAdjacentElement(position, element);

其中，參數(shù)position表示的是插入的位置，字符串類型，取值可以有以下：

beforebegin
afterbegin
beforeend
afterend

可以用如下的結(jié)構(gòu)來(lái)描述具體的位置：

foo

接下來(lái)看一個(gè)demo：
有如下的DOM結(jié)構(gòu)：


    
        origin test , test only

執(zhí)行以上代碼后，DOM結(jié)構(gòu)如下圖所示：

insertAdjacentHTML 和 insertAdjacentElement 也是類似的。

云服務(wù)器 GPU云服務(wù)器 java插入元素方法 js怎么插入tr元素 js在被選元素開頭插入數(shù)據(jù) 數(shù)據(jù)挖掘中的新方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51407.html

相關(guān)文章

js插入元素的新方法insertAdjacentHTML

摘要：下面介紹幾個(gè)新的插入的以上三個(gè)方法分別是用來(lái)向一個(gè)元素中插入文本，字符串格式的代碼結(jié)構(gòu)，以及插入元素這三個(gè)方法的用法基本是一致的。下面介紹幾個(gè)新的插入DOM的API： insertAdjacentText insertAdjacentHTML insertAdjacentElement 以上三個(gè)方法分別是用來(lái)向一個(gè)DOM元素中插入文本，字符串格式的html代碼結(jié)構(gòu)，以及插入DOM元...

paulquei 2019-08-21 17:09 評(píng)論0 收藏0
原生JS中DOM節(jié)點(diǎn)相關(guān)API合集

摘要：返回一個(gè)個(gè)比特位的二進(jìn)制值，表示參數(shù)節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的關(guān)系返回布爾值，用于檢查兩個(gè)節(jié)點(diǎn)是否相等。生成一個(gè)對(duì)象事件方法生成一個(gè)事件對(duì)象，該對(duì)象能被方法使用注冊(cè)事件注銷事件觸發(fā)事件其他返回一個(gè)布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)。原生JS中DOM節(jié)點(diǎn)相關(guān)API合集節(jié)點(diǎn)屬性 Node.nodeName //返回節(jié)點(diǎn)名稱，只讀 Node.nodeType //返回節(jié)點(diǎn)類...

junfeng777 2019-08-20 15:37 評(píng)論0 收藏0
原生JS中DOM節(jié)點(diǎn)相關(guān)API合集

摘要：返回一個(gè)個(gè)比特位的二進(jìn)制值，表示參數(shù)節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的關(guān)系返回布爾值，用于檢查兩個(gè)節(jié)點(diǎn)是否相等。生成一個(gè)對(duì)象事件方法生成一個(gè)事件對(duì)象，該對(duì)象能被方法使用注冊(cè)事件注銷事件觸發(fā)事件其他返回一個(gè)布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)。原生JS中DOM節(jié)點(diǎn)相關(guān)API合集節(jié)點(diǎn)屬性 Node.nodeName //返回節(jié)點(diǎn)名稱，只讀 Node.nodeType //返回節(jié)點(diǎn)類...

BaronZhang 2019-08-01 16:38 評(píng)論0 收藏0
原生JS中DOM節(jié)點(diǎn)相關(guān)API合集

摘要：返回一個(gè)個(gè)比特位的二進(jìn)制值，表示參數(shù)節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的關(guān)系返回布爾值，用于檢查兩個(gè)節(jié)點(diǎn)是否相等。生成一個(gè)對(duì)象事件方法生成一個(gè)事件對(duì)象，該對(duì)象能被方法使用注冊(cè)事件注銷事件觸發(fā)事件其他返回一個(gè)布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)。節(jié)點(diǎn)屬性 Node.nodeName //返回節(jié)點(diǎn)名稱，只讀Node.nodeType //返回節(jié)點(diǎn)類型的常數(shù)值，只讀Node.nodeVa...

lemon 2019-08-20 15:37 評(píng)論0 收藏0
JavaScript DOM擴(kuò)展——“HTML5”的注意要點(diǎn)

摘要：如他返回的對(duì)象是。方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。另外，需要注意的是，該屬性插入元素并不會(huì)執(zhí)行其中的腳本。在中，方法接收一個(gè)字符串，返回一個(gè)經(jīng)過(guò)無(wú)害處理后的版本。屬性同樣的，在讀模式下返回調(diào)用它的元素及所有子節(jié)點(diǎn)的標(biāo)簽。與類相關(guān)的擴(kuò)充 getElementsByClassName()方法接收一個(gè)參數(shù)，即一個(gè)或多個(gè)類名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 評(píng)論0 收藏0