<div id="existing">I'm an existing element</div>
<p>(Read more on: <a href="https://daily-dev-tips.com/posts/javascript-insert-newly-created-element-before-another-element/" target="_blank">daily-dev-tips.com</a>)

body {
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}

const el = document.getElementById('existing');
const p = document.createElement('p');
p.textContent = `Hi I'm new here`;

// Insert before the existing element
el.before(p);

// Insert element and text
el.before(p, "I'm also new");

var colorCodes = {

  back  : "#fff",
  front : "#888",
  side  : "#369"

};