在打開和關閉父標簽之前生成 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;
});