在打开和关闭父标签之前生成 HTML 包装器

Question

我想生成一个包装器，它是共享 class 的子级，但它是添加任何 HTML 标记的直接父级。这将节省创建一堆包装器 div 的时间，其目的是创建特定的布局, 背景等

简单地说，例如，任何 class of.page 都应该生成包装器，但也会围绕其中的任何标记生成。 需要这样的东西：

<div class="page">
   <div class="wrapper"> <!-- GENERATED WRAPPER -->
     <!-- This is where any markup can go -->
   </div><!-- GENERATED WRAPPER -->
</div>

我不确定 PHP 是否会是更好、更安全的方法，但我能找到的最接近的方法是： 请参阅 Michal 的答案。 不知道我将如何应用循环来使其工作，任何想法都会有所帮助。 谢谢。 另外，请只使用纯 JS。

Answer 1

尽管可能存在更好的方法，但这应该适用于每个当前的浏览器。

它的工作原理是查找每个.page元素，创建一个最初为空的包装器元素，然后将原始元素的每个子节点附加到包装器中（nb：append 操作导致子节点从其原始父节点中删除，之后下一个剩余的兄弟姐妹自动成为第一个孩子）。

完成后，它最终将包装元素（现在包含所有原始子元素）作为唯一的新子元素插入 DOM。

 const pages = document.querySelectorAll('.page'); for (const p of pages) { const wrapper = document.createElement('div'); wrapper.classList.add('wrapper'); while (p.firstChild) { wrapper.appendChild(p.firstChild); } p.appendChild(wrapper); }

 .page { border: 1px solid black; margin: 4px; }.wrapper { border: 1px solid red; margin: 4px; }

 <div class="page"> <div>Page 1</div> <p>Para 1</p> <p>Para 2</p> </div> <div class="page"> <div>Page 2</div> <p>Para 1</p> <p>Para 2</p> </div>

Answer 2

const pages = document.querySelectorAll('.page');

const createWrapper = () => {
  const parser = new DOMParser();
  const doc = parser.parseFromString('<div class="wrapper"><nav><ul><li><a href="#">Link</a></li></ul></nav></div>', 'text/html');
  return doc.body;
}

pages.forEach(el => {
  const wrapper = createWrapper();
  const newMarkup = wrapper.innerHTML = wrapper.innerHTML + el.innerHTML;
  el.innerHTML = wrapper.innerHTML;
});