jQueryのappendメソッドをJavaScriptで実現したい

DOMを操作する際はjQueryがすごく活躍します。
要素を追加するときは頻繁にjQueryのappendメソッドを使用します。
jQueryはあくまでJavaScriptのライブラリであるからJavaScriptだけでもappendメソッドのような事が出来るはずだ!!と思ったので調べてみました。
insertAdjacentHTML()
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML
insertAdjacentHTML()
は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置(第一引数で指定)に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、innerHTML
への代入による直接的な操作よりもはるかに高速な動作となります。
このinsertAdjacentHTMLメソッドを使用するとappendと同じ動作をします。
下記のコードで、idがlistsのul要素にli要素を子要素として追加しています。
// buttonを押下するとli要素を追加するスクリプト const btn = document.getElementById('button') const lists = document.getElementById('lists'); // <ul id="lists">/ul>の事です btn.addEventListener('click', () => { // $('#lists').append('<li>追加された要素</li>') lists.insertAdjacentHTML('beforeend', '<li>追加された要素</li>'); })

insertAdjacentHTMLの第一引数を変更する事でappend()以外の処理が可能になります。
以下がjQueryメソッドとの対応表です。
append() | beforeend | 指定した要素内にある最後の子要素の後に挿入 |
prepend() | afterbegin | 指定した要素内にある最初の子要素の前に挿入する |
before() | beforebegin | 指定した要素の直前に挿入する |
after() | afterend | 指定した要素の直後に挿入する |
beforebegin
const ele = document.getElementById('target'); ele.insertAdjacentHTML('beforebeign', '<p>挿入</p>'); /* <p>挿入</p> ←指定したtarget要素の直前に挿入される <div id="target"> <h1>Title</h1> </div> */
afterbegin
const ele = document.getElementById('target'); ele.insertAdjacentHTML('afterbegin', '<p>挿入</p>'); <div id="target"> <p>挿入</p> ←指定したtarget要素の子要素(ここで言えばh1)の前に挿入される <h1>Title</h1> </div>
afterend
const ele = document.getElementById('target'); ele.insertAdjacentHTML('afterend', '<p>挿入</p>'); /* <div id="target"> <h1>Title</h1> </div> <p>挿入</p> ←指定したtarget要素の直後に挿入される */
jQueryで実装できることはJavaScriptでも出来るので疑問に感じたことはどんどんと潰して行きたいです。
その疑問を解いていく事が成長に繋がるのでこれからもわからない事があったらアウトプット!!