Question

我有一个父div节点，其中包含几个span元素，一起构成一个句子或段落。例如，

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

我想像这样使用JavaScript在span的第一个子节点中的“ I”后面插入一个值为“ do n't”的div节点

// 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，则第一个子节点将保持不变，而第二个子节点将是：

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

那么，无论div中的子节点如何，我都如何在任何位置插入节点？插入的节点也可以在子节点内。我需要在没有任何框架的原始JavaScript中执行此操作。

谢谢。

Answer 1

您可以使用insertBefore。

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

insertedNode插入的节点，即newNode
parentNode是新插入节点的父级。
newNode要插入的节点。
referenceNode插入newNode之前的节点。

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

将节点插入文本中其他各个节点之间的特定位置

2 个答案: