JSFiddle - React, Tailwind, and code Playground

HTML

<div class="target">This is the target div to which new elements are associated using jQuery</div>

CSS

body {
  padding:50px;   
}

.target {
  border:2px solid #bbb;
  background-color:#eee;
  padding:10px;
  margin:10px auto;
}

.child {
  display:block;
  width:65px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:5px 10px;
  background-color:DarkRed;    
}

 .sibling {
  display:block;
  width:70px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:5px 10px;
  background-color:black;    
}

JavaScript

$('.target')
    .append('<div class="child">1. Append</div>')
    .prepend('<div class="child">2. Prepend</div>')
    .before('<div class="sibling">3. Before</div>')
    .after('<div class="sibling">4. After</div>');