How to insert an element after the element where the caret is

Question

Thought this was easy with Javascript. I was wrong: I have this HTML code (in the tinymce iframe body):

   <ul>
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
   </ul>

By putting the caret(cursor) somewhere on "Second" word and click a button I want to trigger an onclick-function that inserts a new "LI" AFTER the "Second" list point, resulting in this:

   <ul>
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">New inserted list item</a></li>
      <li><a href="#">Third</a></li>
   </ul>

Note that I don't have an ID or a class applied to the LI-tags. So I cant use getElementByID, and thats where my head dissimilates. (this is all going on inside a TinyMCE editor textarea, but that should not matter in general.)

Answer 1

Live demo here (click).

var anchors = document.querySelectorAll('ul li a');
console.log(anchors);

for (var i=0; i<anchors.length; ++i) {
  anchors[i].addEventListener('click', addList);
}

function addList(e) {
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.href = '#';
  a.textContent = 'new item';
  a.addEventListener('click', addList);
  li.appendChild(a);
  e.target.parentNode.insertBefore(li, e.target.nextSibling);
}