Question

我有以下代码

this.newWrap = document.createElement("div");
this.newWrap.classList.add('xxx');

this.newWrap.appendChild(
    document.querySelector('.two')
);

document.querySelector('.wrap').insertBefore(
    this.newWrap,
    document.querySelector('.three')
);

.xxx {
  background-color: orange;
}

<div class="wrap">
    <div class="one">One</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
    <div class="five">five</div>
</div>

现在我想将this.newWrap插入它所包含的元素的相同位置。所以说使用相同的选择器，我用来包装{（1}}而不是document.querySelector('.two')的元素，如document.querySelector('.three')

中所示

我该怎么做？

Answer 1

现在我想插入this.newWrap和我用来包装元素的相同选择器......

如果你的意思是相同的父，并且在父母的子列表中的相同位置，你确实使用insertBefore - 在移动你要包装的元素之前：

this.newWrap = document.createElement("div");
this.newWrap.classList.add('xxx');
var toWrap = document.querySelector('.two');
toWrap.parentNode.insertBefore(this.newWrap, toWrap);
this.newWrap.appendChild(toWrap);

.xxx {
  background-color: orange;
}

<div class="wrap">
    <div class="one">One</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
    <div class="five">five</div>
</div>

如果您更喜欢先移动元素，那么这也是一个选项 - 您只需跟踪其前父母和兄弟姐妹：

this.newWrap = document.createElement("div");
this.newWrap.classList.add('xxx');
var toWrap = document.querySelector('.two');
var parent = toWrap.parentNode;
var next = toWrap.nextSibling;
this.newWrap.appendChild(toWrap);
parent.insertBefore(this.newWrap, next);

.xxx {
  background-color: orange;
}

<div class="wrap">
    <div class="one">One</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
    <div class="five">five</div>
</div>

即使在其父级中的最后一个元素上也是如此，因为在这种情况下nextSibling将是null，并且如果将null作为“之前”元素传递给{{1它附加到最后。： - ）

Javascript包装元素并插入相同的位置

1 个答案: