Javascript 如何在插入符号所在的元素后插入元素

我认为使用Javascript很容易。我错了： 我有以下HTML代码（在tinymce iframe正文中）：

通过将插入符号（光标）放在“第二个”单词的某个位置并单击按钮，我想触发一个onclick函数，在“第二个”列表点后插入一个新的“LI”，结果如下：

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

请注意，我没有将ID或类应用于LI标记。所以我不能使用getElementByID，这就是我的大脑异化的地方。（这一切都是在TinyMCE编辑器文本区域内进行的，但一般来说这并不重要。）

var-anchors=document.querySelectorAll（'ulli a'）；
控制台日志（锚）；
对于（VarI=0；isigh）。我认为之前没有这样做。也许我错过了@epascarello@epascarello是的，当然。我从他的例子中直接复制了代码。这有点让人失望：）你应该在textarea中对标记进行编码。匹配HTML的文本版本是不会发生的。这只是对主要问题的提取。textarea标记并不是真正代码的一部分，因为它位于tinymce的ifram中。我在这里的重点是获取可以在第二项之后插入该列表项的Javascript。@epascarello哎哟，所以Javascript不能选择光标/插入符号位置周围的LI标记？Javascript只能按ID选择元素？真的吗？基本上，这是一个组合和插入一个新的元素。
   <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>

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