JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Neighborhood">
    <div id="Neighbor1">Neighbor 1</div>
    <div id="Neighbor2">Neighbor 2</div>
    <div id="Neighbor3">Neighbor 3</div>
</div>

CSS

div {
    text-align: center;
}
#Neighborhood {
    color: brown;
}
#NewElement {
    color: green;
}

JavaScript

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function (element) {
    element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function (element) {
    element.parentNode.insertBefore(this, element.nextSibling);
}, false;

/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';

/*  Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor3'));