javascript DOM操作中的insertAdjacentHTML方法

阿新 • • 發佈：2019-01-02

插入HTML內容與文字內容以前用的是innerHTML與innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText兩個API，特地學習一下：

insertAdjacentHTML和 insertAdjacentText這兩個方法很靈活，可以在指定的地方插入html內容和文字內容，在大部分情況下比element.innerHTML的效能更好，比Document Fragments更好的HTML文件插入方案，因為我們知道Document Fragments在某些IE版本中的表現不好。
insertAdjacentText方法與 insertAdjacentHTML方法類似，只不過只能插入純文字，引數相同。

MDN上查了一下相容性：https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	8.0 (8.0)	4.0	7.0	4.0 (527)

介面也很簡單：

js 程式碼:

element.insertAdjacentHTML(position, text);

需要傳入字串引數position，以及字串引數html程式碼。我們可以對照jQuery的HTML插入方法。
引數position 的取值：

beforeBegin：在該元素前插入
afterBegin：在該元素第一個子元素前插入
beforeEnd：在該元素最後一個子元素後面插入
afterEnd：在該元素後插入

方法同意支援空元素，和innerHTML與innerText方法沒什麼區別了。

效能測試可以看這裡：http://jsperf.com/innerhtml-vs-insertadjacenthtml-vs-dom/8

javascript DOM操作中的insertAdjacentHTML方法

插入HTML內容與文字內容以前用的是innerHTML與innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText兩個API，特地學習一下： insertAdjacentHTML和 insertAdjacentText這兩個方法很靈活，可以在指定的地方插入h

Day046--JavaScript-- DOM操作, js中的面向物件, 定時

一. DOM的操作(建立,追加,刪除) parentNode 獲取父級標籤 nextElementSibling 獲取下一個兄弟節點 children 獲取所有的子標籤 <!DOCTYPEhtml><htmllang="en"><

每天一個JS 小demo之個人信息添加。主要知識點：DOM操作中的表格操作，節點操作

mov src i++ blog this tex set elements img 以下是簡易效果： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

javascript dom頁面中的location屬性

完整 javascrip url hash name arc () hostname 開始屬性名稱 host：設置或返回主機名和當前URL的端口號 hostname：設置或返回當前的URL的主機名 href：設置或返回完整的url，可用於設置跳轉 hash：設置或返回從

JavaScript DOM操作及擴展

解釋多層 click 這樣的 cap exe 不能 tails isp 什麽是DOM？？？ DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的一個API（應用程序編程接口）。註意，IE中的所有DOM對象都是以COM（組件對象

[ Day51 ]Python之路----JavaScript --DOM操作

pro 句柄 mar conf 屬性列表輸入框毫秒歷史 asc JavaScript可以操作整個瀏覽器，但是這個瀏覽器對象比較大，因此為了操作方便，又分為三個對象。 1.BOM對象 BOM對象主要操作地址欄，瀏覽歷史，窗口高度等。 2.DOM對象 DOM對象主要操作網

JavaScript DOM操作案例點擊按鈕選擇菜單

cli option code scrip itl -c nbsp round span 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

JavaScript DOM操作案例點擊按鈕顯示隱藏div優化後

元素 clas src com 點擊事件 cti charset round dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript DOM操作案例點擊按鈕修改div的屬性

asc onclick comm cli 顏色代碼 val dom 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript DOM操作案例點擊按鈕實現網頁開關燈

lang 網頁 dom操作 javascrip tle function () click pre <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JavaScript DOM操作案例點擊按鈕通過類樣式的方式顯示跟隱藏div

java javascrip 樣式 ack eight class htm lang charset <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

JavaScript DOM操作案例美女相冊

one cli als padding add ear all tel ret <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &

JavaScript DOM操作案例封裝innerText跟textContent函數(瀏覽器兼容)

val eight 操作 javascrip ret .text doc com round <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

DOM操作中的事件流概念

在HTML中多個巢狀的標籤，如果他們都擁有相同觸發條件的事件，最內部的標籤事件被觸發後，外邊多個標籤的同類型事件也會被觸發，多個標籤同時執行他們同類型事件效果稱為“事件流” 如何避免事件流？？通過獲取事件物件可以阻止事件流，主流瀏覽器(IE9以上版本瀏覽器)：

Python檔案操作中的方法：.write()換行

active =Truewhile active: message =input("\nPlease input your name:\n") if message =='q': break print("welcome " + message + " come to our

JavaScript-DOM操作高階應用

表格應用獲取 tBodies、tHead、tFoot、rows、cells 隔行變色滑鼠移入高亮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

JavaScript-DOM操作應用

建立、插入和刪除元素建立DOM元素 creatElement('標籤元素') 父級.appendChild(子節點)//新增到父級末尾插入元素父級.insertBefore(子節點，在誰之前) <!DOCTYPE html> <ht

JavaScript--Dom操作元素的樣式

在前端開發中，有時候需要動態修改的網頁元素的樣式，這裡將使用JS動態修改元素樣式的方法做個小結：網頁結構：按鈕：　　標籤：input 型別：button id：btn

JavaScript DOM操作淺談

next meta eval asc 進行 too dna parent tag 1.理解DOM：　　DOM（Document Object Model ，文檔對象模型）一種獨立於語言，用於操作xml，html文檔的應用編程接口。　　怎麽說，我從兩個角度理解：

（九）JavaScript DOM操作詳解

DOM （Document Object Model） DOM定義了表示和修改文件所需方法。DOM物件即為宿主物件，由瀏覽器廠商定義，用來操作html和xml功能的一類物件的集合。節點（node） DOM 的最小組成單位叫做節點（node）。文件的樹形結構（D

javascript DOM操作中的insertAdjacentHTML方法

相關推薦