Как вставить элемент после элемента, где находится каретка

Question

Думал, что это было легко с Javascript. Я был неправ: у меня есть этот HTML-код (в теле iframe tinymce):

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

Поместив курсор (курсор) где-нибудь в слово "Second" и щелкнув по кнопке, я хочу вызвать функцию onclick, которая вставляет новый "LI" ПОСЛЕ точки списка "Second", что приводит к следующему:

   <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>

Обратите внимание, что у меня нет идентификатора или класса, примененного к тегам LI. Так что я не могу использовать getElementByID, и там моя голова рассеивается. (все это происходит в текстовом редакторе TinyMCE, но это не должно иметь значения в целом.)

Answer 1

Живая демо здесь (нажмите).

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);
}