Как добавить блок перед определенным блоком?

Есть такая разметка

<p>...</p>
...какие угодно теги и текст...
<h2>1</h2>
.....
<h3>1.1</h3>
.....
<h3>1.2</h3>
.....
<h2>2</h2>
....
<h3>2.1</h3>

и тд.

Мне нужно перед первым <h2> добавить блок с id="test"

Первый <h2> я нашел так:

let first_h2 = $('.blog-post').find('h2')[0];

Затем попробовал сделать так:

$(first_h2).prepend('<div id="test"></div>');

Но блок новый получился дочерним h2, а мне нужно чтобы он шел перед этим h2

Буду благодарен за помощь!