javascript - 如何使用 Vanilla JS 在包含 div 中包装一组兄弟元素？

Question

我有以下 HTML：

<div class="container">
  <h1 class="heading">heading</h1>
  <p class="paragraph">test</p>
  <h2 class="subheading">123</h2>
  <a class="link">321</a>
</div>

如何将最后三个元素包装在 中.container，以便输出如下所示：

<div class="container">
  <h1 class="heading">heading</h1>
  <div class="subcontainer">
    <p class="paragraph">test</p>
    <h2 class="subheading">123</h2>
    <a class="link">321</a>
  </div>
</div>

Answer 1

最好在 HTML 中进行，但如果由于某些限制无法修改 HTML，则可以执行以下操作

const container = document.querySelector('.container');
const subcontainer = document.createElement('div');
const lastThree = Array.from(container.children).slice(-3);

subcontainer.classList.add('subcontainer');

// move the elements into the subcontainer
lastThree.forEach(node => {
  subcontainer.appendChild(node);
});

container.appendChild(subcontainer);

<div class="container">
  <h1 class="heading">heading</h1>
  <p class="paragraph">test</p>
  <h2 class="subheading">123</h2>
  <a class="link">321</a>
</div>

类名container非常通用，请确保您只选择container您想要的元素，否则您可能会无意中修改其他元素。

Answer 2

old_html = document.getElementsByClassName("container")[0];
firstChild = old_html.children[0];
old_html.removeChild(firstChild);
new_html = "<div class='container'>"+ firstChild.outerHTML + "<div class = 'subcontainer'>" +  old_html.innerHTML + "</div></div>";
console.log(new_html);

<div class="container">
  <h1 class="heading">heading</h1>
  <p class="paragraph">test</p>
  <h2 class="subheading">123</h2>
  <a class="link">321</a>
</div>