Automatically enclosing sections of unrelated elements in <div> tags
13:44 06 Jun 2026

I'm trying to create a script that will enclose each chapter of writing in a div element, so that I can automate tabination on posts without having to manually implement it each time. Take something simple, like:

Chapter 1


bla bla bla bla


bla bla bla bla


bla bla bla bla



Chapter 2


bla bla bla bla


bla bla bla bla



Chapter 3


bla bla bla bla


bla bla bla bla


bla bla bla bla


bla bla bla bla



Chapter 4


bla bla bla bla


bla bla bla bla

And turn it into:



Chapter 1


bla bla bla bla


bla bla bla bla


bla bla bla bla







Chapter 2


bla bla bla bla


bla bla bla bla







Chapter 3


bla bla bla bla


bla bla bla bla


bla bla bla bla


bla bla bla bla







Chapter 4


bla bla bla bla


bla bla bla bla

(And then I'll get the tabination done, but I feel it'll be much simpler once I have this part working.)

I think something similar to -

h2.insertAdjacentHTML("beforebegin", "
+
")

...would work (I'll have to create the first starting

, which is fine), but obviously this isn't correct syntax and it just throws an error at me. First, it seems insertAdjacentHTML only works with singular elements, and secondly, inserting the
tags like this seems to incorrectly autocomplete them and does something along the lines of -



Chapter X


bla bla bla bla

...which isn't what I'm going for.

I did find somebody experiencing a similar problem here, but I'm about as inexperienced as you can get with Javascript, so I struggled to replicate the answer given without a completed example to study from.

This is what I'm currently working with:

// 1. Count total amount of chapters in document
var chapterCount = document.querySelectorAll("h2").length;

// 2. Give all 
 tags a unique ID, since I can't seem to use insertAdjacentHTML en masse
for (let i = 0; i < chapterCount; i++) {
    document.querySelectorAll("h2")[i].setAttribute("id", "section-" + (i + 1));
}

// 3. This one doesn't work, but you can see the logic I'm going for. Select each 
 individually, then run the insertAdjacentHTML command on loop until there's no more chapters.
for (let i = 0; i < chapterCount; i++) {
    document.querySelectorAll("#section-") + [i].insertAdjacentHTML("beforebegin", "
+
"); } // 4. Assign each chapter a unique ID, so I can set up tabs without issue for (let i = 0; i < chapterCount; i++) { document.querySelectorAll(".chapter")[i].setAttribute("id", "chapter-" + (i + 1)); }

For Step 3, trying to follow the logic of the other question linked alongside this one as well, I fiddled around with solutions somewhat like below (which doesn't solve the problem of applying it to every

tag, I just needed to know if it worked at all):

const targetElement = document.querySelector("h2")
const pseudoContainer = document.createElement('div');
pseudoContainer.innerHTML = "

"; targetElement.insertAdjacentHTML('beforebegin', pseudoContainer.firstChild);

But the end result always just gives me [object HTMLDivElement] as a return rather than anything I've inputted. (And it's not the weird incomplete tags causing it, because changing to random text returns [object Text] instead.) Inserting pseudoContainer.innerHTML doesn't work either, since it returns a

above the header like I ran into earlier.

Any pointers on where to go from here? I'm sure I'm missing something incredibly obvious, but I tend to avoid using Javascript whenever possible because I lack the experience to understand the terminology used when looking in on other people's discussions. This script will save me a lot of time going forward however, so I'm doing what I can to learn everything one step at a time.

Thank you in advance!!

javascript html