【JavaScript】insertAdjacentHTMLを使ってテキストを追加する方法

<button id="add-btn">要素追加ボタン</button>
<div id="content-point">起点となる要素</div>

<script>
const addBtn = document.getElementById('add-btn');
const contentPoint = document.getElementById('content-point');

addBtn.addEventListener('click',function(){
  contentPoint.insertAdjacentHTML('afterbegin','<p>追加された要素</p>');
  contentPoint.insertAdjacentHTML('beforeend','<p>追加された要素</p>');
  contentPoint.insertAdjacentHTML('beforebegin','<p>追加された要素</p>');
  contentPoint.insertAdjacentHTML('afterend','<p>追加された要素</p>');
});
</script>