Вставить узел в определенную позицию в тексте среди различных других узлов

#javascript #html

#javascript #HTML

Вопрос:

У меня есть родительский div узел, содержащий несколько span элементов, вместе образующих предложение или абзац. Например,

 <div>
  <span class="red">I </span>
  <span class="normal">love </span>
  <span class="red">you</span>
  <span class="normal">.</span>
</div>

Я хочу вставить span узел со значением «не» после «I» в первый дочерний узел в div с использованием JavaScript, вот так

 // Note that the position is between the text, not the node positions
// No JavaScript function exists like the below, btw
document.getElementsByTagName("div")[0].insertNodeAtPos(2, mySpanElement);

Для этого у меня есть числовая позиция (здесь, 2), такая, что первый узел будет:

 <span class="red">I <span>don't</span>

И если бы у меня была позиция 3, то 1-й дочерний узел был бы нетронутым, а второй дочерний узел был бы:

 <span class="normal"><span>don't</span>love </span>

Итак, как я могу вставить узел в любую позицию, независимо от дочерних узлов в div ? Вставленный узел также может находиться внутри дочернего узла. Мне нужно сделать это на ванильном JavaScript без каких-либо рамок.

Заранее спасибо.

1. Это сразу после того, как I

2. @Bibberty нет, это после любого смещения позиции в текстовых значениях этих <span> элеме нтов. Я взял 2 просто в качестве примера для позиции, которая привела бы к вставке span после буквы «I».

3. Хорошо, но смещение против слова, которое я заметил. Думаю, я понял.

Ответ №1:

Вы можете использовать insertBefore.

 var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode Вставляемый узел, то есть newNode
parentNode Родительский элемент вновь вставленного узла.
newNode Узел, который нужно вставить.
referenceNode Узел, перед которым newNode вставляется.

1. У меня нет доступа к ссылочному узлу, поскольку я никак не могу узнать, в каком узле находится позиция. Если у меня есть позиция 5, как я могу узнать, в каком <span> узле находится это смещение те кста? Конечно, из приведенного выше примера я могу сказать, что смещение текста на 5 находится на 2-м дочернем узле в < div>. Но мое приложение добавляет дочерние узлы с текстом динамически, поэтому я не могу его отслеживать.

2. Верно, я пропустил ту часть, когда вы отмечаете, что вам нужно вставить его в текст.

Ответ №2:

Здесь используется индекс, основанный на нулевом значении. Попробуйте изменить значение.

 // Assumes every word has a span wrapper.
function insertAtNodePosition(pos, element) {
  // get container node
  let container = document.querySelector('div');
  // array of the words (span)
  let words = container.querySelectorAll('span');
  // determine which one to add before
  let word = words[pos];
  
  if(word) {
    container.insertBefore(element, word);
  } else {
    container.childNodes.appendChild(word);
  }
}

let myElement = document.createElement('span');
myElement.innerText = "don't ";

insertAtNodePosition(0, myElement);

 <div>
  <span class="red">I </span>
  <span class="normal">love </span>
  <span class="red">you</span>
  <span class="normal">.</span>
</div>
<!--
I want to insert a span node with value of "don't" after "I " in the first child node in the div using JavaScript, like this

// Note that the position is between the text, not the node positions
// No JavaScript function exists like the below, btw
document.getElementsByTagName("div")[0].insertNodeAtPos(2, mySpanElement);
-->