javascript插入before(),after()新DOM方法

隨著web的技術突飛猛進的發展。HTML5 ES6等新技術的發展，與此同時DOM等標準也在悄悄的進步，各大流覽器也在悄悄的發展適配新的屬性和方法，今天我們來看看Javascript新的DOM的方法

before(),after(),prepend(),append()等新增DOM

before()

before()是個ChildNode方法，

也就是節點方法。節點方法對應於元素方法。區別在於，節點可以直接是文本節點，甚至注釋等。但是，元素必須要有HTML標籤。

因此，before()的參數既可以是DOM元素，也可以是DOM節點，甚至可以直接字元內容;

語法如下

void ChildNode.before((節點或字串)... 其它更多節點);

DOM案例

1 2 3 4 5 Document 6 7 8 9

10 11 12 13

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。

這是插入DOM節點，那可不可以指接拆入純文字呢O(∩_∩) 淡然可以，

我們再看一下純文字代碼

顯然是可以的，那插入HTML字串呢

Document

可以看吃是不可以直接插入HTML字串的，

有人要疑問了，我非要在圖片前面插入HTML字元內容怎麼辦

可以使用相容性更好的insertAdjacentHTML() DOM方法，使用示意如下：

document.getElementById('img').insertAdjacentHTML('beforebegin', '美女：');

語法如下：

element.insertAdjacentHTML(position, html);

after()

after跟before()語法特性相容性都是一一對應的，差別就在於語義上，一個是在前面插入，一個是在後面插入。

，這裡就不更詳細的解釋了

重點after（）與before這些新的方法有相容性，相容版本如下圖所示

如果非要再舊版流覽器使用新的API屬性怎麼辦呢，我們需要引入一段代碼來讓老式流覽器相容

注意，上面的polyfill 並不支持IE8及其以下流覽器。 API只能在至少相容到IE9流覽器的項目使用。

結束語

我們如今，原生的DOM API借鑒jQuery的優點，也整出了很多簡單遍歷的API方法；如果我們再粘貼一些polyfill JS搞定相容性問題；再配合ES5很多資料處理方法；DOM leave 3的事件處理等。

基本上就沒有需要使用jQuery的理由了，省了資源載入，提高了代碼性能，

所以，基本上，已經不可逆地，在不久將來，不出幾年，行業會興起原生DOM API，原生JS開發前端應用的小風尚，jQuery會越來越不被人提起，完成其歷史使命，日後可以領取個終身成就獎。

基本上就沒有需要使用jQuery的理由了，省了資源載入，提高了代碼性能，