I have a basic HTML file. It's essentially a blog post worth of content, with `<h2>` tags seperating different content zones.

```html
<h2>Header A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<h2>Header B</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<h2>Header C</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
```

What I want to do is have javascript add an HTML `wrapper` class at the start of the `<h2>` tag it sees, and close it upon seeing the next `<h2>` tag like so.

This way I can write blog content naturally in markdown, but customize the look and feel of a site. So I can focus on content and not forgetting whether I closed tags properly

Below is a simple example where I add margins, padding, and opacity hover effects. This is the end result that I want.

*The `<h2>` tags are all going to be at the same level in the DOM.*

```css
.wrapper {
  background-color: lightgray;
  padding: 20px;
  margin: 20px;
  opacity: 0.5;
}
.wrapper:hover{
  opacity:1;
}
```

```html
<div class="wrapper">
  <h2>Header A</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>
<div class="wrapper">
  <h2>Header B</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>
<div class="wrapper">
  <h2>Header C</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>
```

I imagine I could use a `document.querySelector("h2")`, or some sort of `:nth-of-type` pseudoselector, grab the element right before next `<h2>`, and add a parent class to everything. But I am not entirely sure how this is implemented.