DOMを操作する際はjQueryがすごく活躍します。
要素を追加するときは頻繁にjQueryのappendメソッドを使用します。
jQueryはあくまでJavaScriptのライブラリであるからJavaScriptだけでもappendメソッドのような事が出来るはずだ！！と思ったので調べてみました。

insertAdjacentHTML() 

insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。

https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

この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でも出来るので疑問に感じたことはどんどんと潰して行きたいです。
その疑問を解いていく事が成長に繋がるのでこれからもわからない事があったらアウトプット!!