JSFiddle - React, Tailwind, and code Playground

by andy_h

HTML

<div id="box">
  <div id="preexisting-jack">
    I was here all along!
  </div>
</div>
<div id="box2">
  <div id="preexisting-jack">
    I was here all along!
  </div>
</div>

CSS

#box {
  background: Pink;
}

#box2 {
  background: LightBlue;
}

#box,
#box2 {
  padding: 20px;
  margin: 20px;
  height: 100px;
}

#preexisting-jack {
  background: LightYellow;
  padding: 10px;
}

body {
  margin: 0;
}

JavaScript

// Append
const box = document.getElementById('box')
const jack = document.createElement("div")
jack.innerHTML = 'Jack! (I was appended here)'
box.appendChild(jack);

// Prepend
const box2 = document.getElementById('box2')
const jack2 = document.createElement("div")
jack2.innerHTML = 'Jack2! (I was prepended here)'
box2.insertBefore(jack2, box2.firstChild)