JSFiddle - React, Tailwind, and code Playground

HTML

<script language="javascript">
<!--//

function insertItem(myid,position,newListItem) {
    newListItem = '<img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p>';
    var ul = document.getElementById(myid);
    var li = document.createElement("li");
    li.innerHTML=newListItem;
    
    var liNodes = [];
 
for (var i = 0; i < ul.childNodes.length; i++) {
    if (ul.childNodes[i].nodeName == "LI") {
        liNodes.push(ul.childNodes[i]);
    }
}
    
    
    ul.insertBefore(li, ul.getElementsByTagName("li")[liNodes]);
}

//-->
</script>




<form>

<!-- Change "<li>test</li>" to whatever you want -->
<!-- Change "0" to which list item to insert before (starts at 0, not 1) -->

<input type='button' value='Insert'  onClick="insertItem('wi-el',0,'')">

</form>