<aside id="sidecontent">
  <h1>insertAdjacentHTML example</h1>
  
  <p>You care about justice? Look beyond your own pain, Bruce. This city is rotting.</p>
  
  <p>I seek the means to fight injustice. To turn fear against those who prey on the fearful.</p>

  <p>You care about justice? Look beyond your own pain, Bruce. This city is rotting.</p>
  
  <p>I seek the means to fight injustice. To turn fear against those who prey on the fearful.</p></aside>

aside {
  margin: 0 auto;
  padding: 1em;
  width: 80vw;
  border: 2px solid blue
}

.beforebegin {
  color: rebeccapurple;
}

.afterbegin {
  color: red
}

.beforeend {
  color: green;
}

.afterend {
  color: cyan;
}

const sidecontent = document.getElementById("sidecontent");

sidecontent.insertAdjacentHTML("beforebegin", "<p class='beforebegin'><strong>Beforebegin</strong></p>");

sidecontent.insertAdjacentHTML("afterbegin", "<p class='afterbegin'><strong>afterbegin</strong></p>");

sidecontent.insertAdjacentHTML("beforeend", "<p class='beforeend'><strong>beforeend</strong></strong></p>");

sidecontent.insertAdjacentHTML("afterend", "<p class='afterend'><strong>afterend</strong></p>");