JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="addText()">
<div id="main-content">
<p>1</p>
</div>
<div id="main-content">
<p>2</p>
</div>
<div id="main-content">
<p>3</p>
</div>
<div id="main-content">
<p>4</p>
</div>
</body>

JavaScript

var appender=1;
function addText(){
    var parentDiv =document.getElementById('main-content');      
    var node=document.createElement("DIV");
    var textnode=document.createTextNode("This was added dinamically");
    node.appendChild(textnode);     
    node.id = 'custom-div_' + appender;
    var child = parentDiv.children[2];
    parentDiv.insertBefore(node, child);
    appender++;
 
}