[Javscript] insertAdjacentHTML、insertAdjacentText，vanilla.js 就支援的插入 HTML 及文字

最近才知道 HTML 元素有 insertAdjacentHTML  insertAdjacentText這兩個方法，讓插入 HTML 或文字位置時可以比較有彈性。(類似 jQuery prepend 或 append 等等)

以下就來介紹他的用法吧~

insertAdjacentHTML(position, text) 及 insertAdjacentText(position, text)

position:

• beforebegin: 插入在元素標籤前(外層)
• afterbegin: 插入在元素標籤內的開頭
• beforeend: 插入在元素標籤內的結尾
• afterend: 插入在元素標籤後(外層)

text: 期望插入的 HTML 字串或純文字。

ps. insertAdjacentText 與 insertAdjacentHTML 差別就在 insertAdjacentHTML 僅允許插入純文字。

直接來看看程式碼或許會更理解囉~

參考資料：

https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentText