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

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

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

Поместив курсор (курсор) где-нибудь на «Второе» слово и нажав кнопку, я хочу вызвать функцию 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>

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


javascript tinymce-4
person Recoil    schedule 25.11.2013    source источник
comment
Вы должны кодировать теги в текстовом поле.   -  person epascarello    schedule 25.11.2013
comment
Сопоставление текстовой версии HTML не произойдет stackoverflow.com/questions/1732348/   -  person epascarello    schedule 25.11.2013
comment
Это лишь извлечение основной проблемы. Тег textarea на самом деле не является частью реального кода, так как он находится внутри iframe tinymce. Я просто сосредоточился здесь на том, чтобы получить этот Javascript, который может вставить этот элемент списка после второго элемента.   -  person Recoil    schedule 25.11.2013
comment
@epascarello Ой, значит, Javascript не может выбрать тег LI, окружающий позицию курсора/каретки? Javascript может выбирать элементы только по идентификатору? Действительно?   -  person Recoil    schedule 25.11.2013
comment
В основном это комбинация stackoverflow.com/ вопросов/3972014/ и вставив новый элемент.   -  person epascarello    schedule 25.11.2013
comment
Это делает то, что я хочу (jsfiddle.net/wygKS), но использует getElementById. Есть ли другой способ добраться до этого элемента LI, когда внутри него есть каретка? Я могу добраться до него, используя getNode, parentNode, но не могу вставить его после закрывающего тега.   -  person Recoil    schedule 25.11.2013

Ответы (1)


arrow_upward
1
arrow_downward

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

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);
}
person m59    schedule 25.11.2013
comment
вздох. Я не думаю, что это было раньше. Может быть, я пропустил это. @epascarello - person m59; 25.11.2013
comment
@epascarello да, конечно. Я скопировал код прямо из его примера. Такого рода отстой, чтобы получить отрицательный голос за :) - person m59; 25.11.2013