Javascript 创建div的嵌套循环

我想创建一个小的嵌套循环，它将从我的

h1

和

h2

/

h3

标记创建div。我意识到这可能与其他问题无关，所以至少我希望被指向正确的方向：）

鉴于此HTML：

<h1>LEVEL 1.1</h1>
<h2 class="section">SECTION 2.1</h2>
<h2 class="section">SECTION 2.2</h2>
<h2 class="section">SECTION 2.3</h2>
<h1>LEVEL 1.2</h1>
<h2 class="section">SECTION 2.4</h2>
<h2 class="section">SECTION 2.5</h2>
<h2 class="section">SECTION 2.6</h2>
<h1>LEVEL 1.3</h1>
<h2>SECTION 2.7</h2>
<h2>SECTION 2.8</h2>
<h2>SECTION 2.9</h2>

1.1级
第2.1节
第2.2节
第2.3节
1.2级
第2.4节
第2.5节
第2.6节
1.3级
第2.7节
第2.8节
第2.9节

我想创建新的HTML（在所需的输出中）

const h1\u div=函数（nm）{
返回`${nm}`
}
常数h2_div=函数（数值，nm）{
返回`${nm}`
}
$（文档）.ready（函数（）{
var标题=document.queryselectoral（“h1、h2、h3”）；
H1_divs=[]；
H2_divs=[]；
所有分区=[]；
//创建一个生成H1 div的循环
//把所有的H2 div都放进去了
/*
1.1级
第2.1节
第2.2节
第2.3节
1.2级
第2.4节
第2.5节
第2.6节
1.3级
第2.7节
第2.8节
第2.9节
*/
测试=[]；
//在h1上循环
//在每个h1中生成h2s
对于（i=0；i

1.1级
第2.1节
第2.2节
第2.3节
1.2级
第2.4节
第2.5节
第2.6节
1.3级
第2.7节
第2.8节
第2.9节这应该是可行的-


const h1\u div=函数（nm）{
返回`${nm}`
}
常数h2_div=函数（nm，num）{
返回`${nm}`
}
const replaceHtml=function（标记，htmlFunction）{
var$tag=$（tag）；
对于（变量i=0；i<$tag.length；i++）{
var currentTag=$tag[i]；
var$newHtml=$（htmlFunction（currentTag.innerHTML，i+1））；
$（currentTag）.replaceWith（$newHtml）；
}
}
$（文档）.ready（函数（）{
替换HTML（“h1”，h1_div）；
替换HTML（“h2”，h2_div）；
log（document.getElementById（“section toc”）.innerHTML）；
});

1.1级
第2.1节
第2.2节
第2.3节
1.2级
第2.4节
第2.5节
第2.6节
1.3级
第2.7节
第2.8节
第2.9节
我也做了一支笔，如果那更容易使用：你的问题是什么？后期生成的HTML。