Create an HTML container surrounding the content within the parent tags

Question

Create an HTML container surrounding the content within the parent tags

I'm looking to create a wrapper that acts as the immediate parent of any HTML markup added within a shared class. This will eliminate the need to manually add multiple wrapper divs and allow for the customization of layouts and backgrounds.

Essentially, I want any element with the class .page to automatically generate a wrapper around its content. Here's an example of what I'm aiming for:

<div class="page">
   <div class="wrapper"> <!-- AUTO-GENERATED WRAPPER -->
     <!-- Content goes here -->
   </div><!-- AUTO-GENERATED WRAPPER -->
</div>

I've considered using PHP for this task, but after searching, I came across a JavaScript solution which seemed closest to what I need: See Michal's answer. If anyone has ideas on how to implement this with a loop in pure JS, I would greatly appreciate it. Thank you!

javascript

Answer 1

Answer №1

While there may be more efficient methods available, this solution is compatible with all current web browsers.

The process involves identifying each .page element, creating an empty wrapper element, and then moving each child node of the original element into the wrapper (note: when appended, the child is removed from its original parent, causing the next remaining sibling to become the first child automatically).

Upon completion, the wrapper element (now containing all the original children) is inserted into the DOM as the new sole 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

While there may be more efficient methods available, this solution is compatible with all current web browsers.

The process involves identifying each .page element, creating an empty wrapper element, and then moving each child node of the original element into the wrapper (note: when appended, the child is removed from its original parent, causing the next remaining sibling to become the first child automatically).

Upon completion, the wrapper element (now containing all the original children) is inserted into the DOM as the new sole 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 3

Answer №2

let sections = document.querySelectorAll('.section');

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

sections.forEach(element => {
  const container = generateContainer();
  const updatedContent = container.innerHTML + element.innerHTML;
  element.innerHTML = updatedContent;
});

Answer 4

let sections = document.querySelectorAll('.section');

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

sections.forEach(element => {
  const container = generateContainer();
  const updatedContent = container.innerHTML + element.innerHTML;
  element.innerHTML = updatedContent;
});

Create an HTML container surrounding the content within the parent tags

Answer №1

Answer №2

Similar questions

How should one go about creating an npm package out of a vuejs component and testing it locally?

Smoothly automate horizontal scrolling using JavaScript

Vuex getters not displaying expected values in computed properties until entire page has finished loading

Screening new elements to be included in the array

Gridsome's createPages and createManagedPages functions do not generate pages that are viewable by users

What is the best way to integrate react-final-form with material-ui-chip-input in a seamless manner

Utilize React Native to showcase JSON data in a visually appealing way by organizing it into titles and corresponding lists for both

Drawbacks of adjusting design according to screen width via javascript detection

The best approach for setting a select value and managing state in React using TypeScript

Developing a website using custom modules in Node.js and Express framework

The integration of Zoom SDK with React and Node inevitably leads to encountering errors

Encountered an error when trying to access the 'modules' property of undefined in the /node_modules/bindings/bindings.js file while working with electron and setting up

Retrieve the prior position using the AngularJS ui-router

Tips for correctly updating the status of a checkbox linked to a database

Using React Quill JS and looking to log to the console when a change handler is triggered?

Refreshing Data on Vuetify Range Slider

Discover the best way to integrate your checkbox with your Jquery capabilities!

Error: Validation error encountered while validating recipe: _listId field is mandatory and must be provided

The latest version of Ant Design, version 4, causes issues with React Testing Library tests for the Select

Mastering the Art of Modifying HTML with Node.js