How to Wrap Adjacent Elements of the Same Class Using Vanilla JavaScript

Learn how to effectively group HTML elements using plain JavaScript, without relying on jQuery or other libraries.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do I wrap adjacent elements of the same class using Javascript (no jQuery)

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Wrap Adjacent Elements of the Same Class Using Vanilla JavaScript

As web developers, we often find ourselves faced with the challenge of manipulating the Document Object Model (DOM) to achieve desired layouts and functionality. One common scenario is needing to wrap adjacent elements of the same class in a new container element. While many resources provide solutions using jQuery, there’s a way to accomplish this using only vanilla JavaScript.

The Problem Statement

Imagine you have a series of <div> elements with the same class name, .codeblock. You want to group them into a single container <div> called .contentBox whenever they are adjacent. Here’s an example of the HTML structure you might be working with:

[[See Video to Reveal this Text or Code Snippet]]

Desired Output

The goal is to transform the HTML structure to look like this:

[[See Video to Reveal this Text or Code Snippet]]

The Vanilla JavaScript Solution

To tackle this problem with pure JavaScript, we can follow a step-by-step approach. Below is a succinct solution that leverages JavaScript’s querySelectorAll and nextElementSibling methods to achieve our desired effect:

[[See Video to Reveal this Text or Code Snippet]]

How It Works

Selecting Elements:

Creating a Wrapper:

For each of the selected elements, a new <div> called wrapper is created and given the class contentBox.

Inserting the Wrapper:

The wrapper is inserted into the DOM right before the selected .codeblock element.

Appending Adjacent Elements:

A while loop checks for additional .codeblock elements that follow the current one and appends them to the wrapper.

Final Arrangement:

Finally, the first .codeblock is inserted at the beginning of the wrapper.

Conclusion

This approach allows you to efficiently group adjacent elements with the same class using plain JavaScript, eliminating the need for jQuery. By following these steps, you can manipulate your HTML structure and achieve the grouping effect smoothly and seamlessly.

Feel free to implement this solution in your projects, and relish in the reduced dependency on libraries!