看到「Why I'm still using jQuery in 2019」這篇，裡面提到了 jQuery 很多操作上相較於 vanilla javascript 簡單很多，其中一個例子提到了 DOM 操作的 insertAdjacentElement()：
el.insertAdjacentElement('afterend', other)undoubtedly works, but$(el).after(other)is actually palatable.
其實我不知道 insertAdjacentElement() 這個功能，我知道的操作都是透過 parentElement、firstChild 在移動位置，然後用 appendChild() 與 insertBefore() 放進去。
跑去 MDN 上查了「Element.insertAdjacentElement() - Web APIs | MDN」後才發現有這個好用的東西：
targetElement.insertAdjacentElement(position, element);
position 的四個變化減少了以前組積木組多了會頭暈的情況。
接下來是研究支援度的問題，才發現可能是因為 Firefox 一直到 48 才支援 (從「Firefox version history」可以看到 48 是 2016 年八月釋出)，所以網路上大多數的文章都還是用組積木的方式在介紹 DOM 操作，以避免相容性的問題：
Firefox 48 was released on August 2, 2016 for both desktop and Android.
另外還看到 insertAdjacentHTML() 與 insertAdjacentText() 可以用，其中讓我注意到 MDN 上面提到 insertAdjacentHTML() 居然是 Firefox 8+？本來以為是 48+ 的誤植，但從 Mozilla 的記錄「Implement insertAdjacentHTML」這邊可以看到，應該是在 Firefox 8 的時候實作的，這樣的話可以當作 insertAdjacentElement() 的替代品 (如果考慮到古早的相容性)，只是這邊需要輸入 html string，跟其他操作是是用 element 不太一致...
意外的學到不少歷史故事... @_@