Question

用Javascript认为这很容易。我错了：我有这个HTML代码（在tinymce iframe主体中）：

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

将插入符号（光标）放在“第二”字的某处，然后单击一个按钮，我想触发一个onclick-function，在“Second”列表点之后插入一个新的“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>

请注意，我没有应用于LI标签的ID或类。所以我不能使用getElementByID，这就是我的头部异化的地方。（这一切都发生在TinyMCE编辑器textarea中，但这一般无关紧要。）

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

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

1 个答案: