时间戳

首页 > 解决方案 > 如何一个一个地插入元素

javascript - 如何一个一个地插入元素

问题描述

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

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

上述容器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;

}

你们能告诉我为什么它不正确吗？

标签： javascript

解决方案

问题是按索引循环遍历子项将是不正确的，因为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>

推荐阅读