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

Question

I'd like to generate a wrapper that's a child of a shared class, but it's the immediate parent of the whatever HTML markup is added in. It will save time creating a bunch of wrapper divs and the purpose of this is to create specific layouts, backgrounds, etc.

Simply put, for example, any class of.page should generate the wrapper but also generate around whatever markup that goes inside it. Would need something like this:

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

I wasn't sure if PHP would be a better, more secure method but the closest thing I could find was: See Michal's answer. Not sure how I would apply a loop to get this to work, any ideas would help. Thanks. Also, pure JS only please.

Answer 1

Although better methods may exist, this should work on every current browser.

It works by finding every .page element, creating an initially empty wrapper element, and then appending each child node of the original element into the wrapper (nb: the append operation causes the child to be removed from its original parent, after which the next remaining sibling automatically becomes the first child).

Once done, it finally inserts the wrapper element (which now contains all of the original children) into the DOM as the sole new child.

 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;
});