JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>My element 1</li>
  Some text
  <li>My element 2</li>
  <br />
  <br />
  <li>My element 3</li>
</ul>

JavaScript

var mylist = document.querySelector('ul');
mylist.addEventListener('click', function(evt){
  alert( getElementIndex(evt.target) )
})

function getElementIndex(node) {
  var index = 0;
  while ((node = node.previousElementSibling)) {
    index++;
  }
  return index;
}

let children = mylist.querySelectorAll('li');
addBefore(children[0], 'hello world')
addBefore(children[0], 'foo bar')
addBefore(children[1], 'hakuna matata!')

function addBefore(target, text) {
  let newLi = document.createElement('li')
  newLi.name = 'test' // WTF???
  newLi.innerHTML = text
  target.parentNode.insertBefore(newLi, target)
}