在div中包装元素

Question

假设我在一些div中有几个孩子divs

我希望红色的一个被包裹在新的父div中，但保持等级顺序（不作为最后一个孩子，在这种情况下是第三个孩子）。

我的方法：

var red = document.getElementById('red');

var parent = red.parentNode;

var new_div = document.createElement('DIV');

parent.appendChild(new_div);

new_div.appendChild(red);

1. 查找红色元素
2. 转到红色元素的父节点
3. 创建新元素作为第2步的子元素，但只知道该元素将是最后一个元素（appendChild方法）
4. 在新创建的div中添加红色元素

我想用外行的话来说，我只是想要一些元素被包裹起来并且包裹起来会产生最小的后果。可能在vanilla Javascript中。

谢谢。

Answer 1

Create一个新的包装元素，insert it before要包装的节点，然后append节点到包装器：

＆＃13;

＆＃13;

var target = document.querySelector('.target');

var wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

target.parentNode.insertBefore(wrapper, target);

wrapper.appendChild(target);

＆＃13;

div div:not(:last-child) {
  margin-bottom: 2px;
}

.child {
  width: 100px;
  height: 50px;
  border: 2px solid red;
}

.wrapper {
  width: 100px;
  height: 50px;
  border: 2px solid gold;
}

.wrapper > .child {
  width: 96px;
  height: 46px;
}

＆＃13;

<div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child target"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;