js插入元素的新方法insertAdjacentHTML

pinecone 發布于2019-08-01 17:50 / 1200人閱讀

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

下面介紹幾個新的插入DOM的API：

insertAdjacentText
insertAdjacentHTML
insertAdjacentElement

以上三個方法分別是用來向一個DOM元素中插入文本，字符串格式的html代碼結構，以及插入DOM元素；這三個方法的用法基本是一致的。

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

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

beforebegin
afterbegin
beforeend
afterend

可以用如下的結構來描述具體的位置：

foo

接下來看一個demo：
有如下的DOM結構：


    
        origin test , test only

執行以上代碼后，DOM結構如下圖所示：

insertAdjacentHTML 和 insertAdjacentElement 也是類似的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51407.html

js插入元素的新方法insertAdjacentHTML

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

paulquei 2019-08-21 17:09 評論0 收藏0
原生JS中DOM節點相關API合集

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

junfeng777 2019-08-20 15:37 評論0 收藏0
原生JS中DOM節點相關API合集

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

BaronZhang 2019-08-01 16:38 評論0 收藏0
原生JS中DOM節點相關API合集

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

lemon 2019-08-20 15:37 評論0 收藏0
JavaScript DOM擴展——“HTML5”的注意要點

摘要：如他返回的對象是。方法，這個方法用于確定文檔是否獲得了焦點。另外，需要注意的是，該屬性插入元素并不會執行其中的腳本。在中，方法接收一個字符串，返回一個經過無害處理后的版本。屬性同樣的，在讀模式下返回調用它的元素及所有子節點的標簽。與類相關的擴充 getElementsByClassName()方法接收一個參數，即一個或多個類名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 評論0 收藏0