js給指定元素插入元素insertAdjacentHTML

前言

insertAdjacentHTML() 方法將指定的文本解析爲 Element 元素，並將結果節點插入到DOM樹中的指定位置。它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接使用innerHTML操作更快。

• 'beforebegin'：元素自身的前面。
• 'afterbegin'：插入元素內部的第一個子節點之前。
• 'beforeend'：插入元素內部的最後一個子節點之後。
• 'afterend'：元素自身的後面。

封裝的兩個函數:

insertAfter：在指定元素之後插入新元素

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

// <div id="myId">...</div> <p>after</p>
insertAfter(document.getElementById('myId'), '<p>after</p>'); 

insertBefore：在指定元素之前插入新元素

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>

延伸：

insertAdjacentText()：插入文本內容，使用方法一樣