Question

我有一个容器跨度元素，在这个跨度中，我有几个子跨度元素，例如：

<span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>
</span>

在上述容器范围之前的前一个范围称为preElement，结构为：

<span>w</span>

我想做的是将所有子元素插入容器中的preElement之后。新结构应为：

  <span>w</span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>

我所做的是：

for (var i = 0; i < container.children.length; i++) {

    preElement.parentNode.insertBefore(container.children[i],
            preElement.nextSibling);

    preElement = preElement.nextSibling;

}

你们能让我知道为什么它不正确吗？

Answer 1

问题在于按索引循环遍历子级是不正确的，因为child[i]将从调用insertBefore的列表中删除，从而导致元素被跳过。

您可以将container的子代视为堆栈，并不断弹出容器的最后一个子代，并将其插入preElement之后，直到为空：

const [preElement, container] = document.getElementsByTagName("span");

while (container.children.length) {
  preElement.parentNode.insertBefore(
    container.children[container.children.length-1],
    preElement.nextSibling
  );
}

<span>w</span>
<span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>
</span>

或者，坚持使用将preElement重复移动到下一个同级兄弟的方法：

let [preElement, container] = document.getElementsByTagName("span");

while (container.children.length) {
  preElement.parentNode.insertBefore(
    container.children[0],
    preElement.nextSibling
  );

  preElement = preElement.nextSibling;
}

<span>w</span>
<span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>
</span>

如何一一插入元素

1 个答案: