Javascript 使用DOMParser在每个头之后添加div容器

一串

<h1>aa</h1><p>xx</p><p>yy</p><h1>aaa</h1><p>xxx</p><p>yyy</p>

到目前为止，这就是我所做的

let s=“aaxx
yy
aaaxxx
yy
”；
const parser=new DOMParser（）；
const doc=parser.parseFromString（s'text/html'）；
常量elems=doc.body.queryselectoral（'*'）；
[…元素].forEach（元素=>{
如果（el.textContent！=''&&el.tagName==='H1'）{
el.insertAdjacentHTML（'afterend'，'
// 
}
});
log（doc.body.innerHTML）

使用动态创建一个

DIV

，并使用

let s=“aaxx
yy
aaaxxx
yy
”；
const parser=new DOMParser（）；
const doc=parser.parseFromString（s'text/html'）；
常量elems=doc.body.queryselectoral（'*'）；
[…元素].forEach（元素=>{
如果（el.textContent！=''&&el.matches（'H1'））{
//创建div容器
var div=document.createElement（'div'）；
//设置Id
div.id=el.textContent；
//在H1之前获得下一个兄弟姐妹
风险值=下一个（el，'H1'）；
对于（变量i=0；i<1.length；i++）{
//将兄弟姐妹移动到div中
附属儿童分部（兄弟姐妹[i]）；
}
//在DOM树中的el之前插入div
el.parentNode.insertBefore（div，el.nextSibling）；
}
});
函数nextUntil（元素、选择器）{
//设置兄弟数组
风险值=[]；
//获取下一个同级元素
elem=elem.nextElementSibling；
//只要有兄弟姐妹存在
while（elem）{
//如果我们达到了目标
如果（元素匹配（选择器））
打破
//否则，将其推送到同级阵列
兄弟姐妹。推（elem）；
//获取下一个同级元素
elem=elem.nextElementSibling；
}
返回兄弟姐妹；
}
log（doc.body.innerHTML）

使用动态创建一个

DIV

，并使用

let s=“aaxx
yy
aaaxxx
yy
”；
const parser=new DOMParser（）；
const doc=parser.parseFromString（s'text/html'）；
常量elems=doc.body.queryselectoral（'*'）；
[…元素].forEach（元素=>{
如果（el.textContent！=''&&el.matches（'H1'））{
//创建div容器
var div=document.createElement（'div'）；
//设置Id
div.id=el.textContent；
//在H1之前获得下一个兄弟姐妹
风险值=下一个（el，'H1'）；
对于（变量i=0；i<1.length；i++）{
//将兄弟姐妹移动到div中
附属儿童分部（兄弟姐妹[i]）；
}
//在DOM树中的el之前插入div
el.parentNode.insertBefore（div，el.nextSibling）；
}
});
函数nextUntil（元素、选择器）{
//设置兄弟数组
风险值=[]；
//获取下一个同级元素
elem=elem.nextElementSibling；
//只要有兄弟姐妹存在
while（elem）{
//如果我们达到了目标
如果（元素匹配（选择器））
打破
//否则，将其推送到同级阵列
兄弟姐妹。推（elem）；
//获取下一个同级元素
elem=elem.nextElementSibling；
}
返回兄弟姐妹；
}
log（doc.body.innerHTML）
<h1>aa</h1><div id="aa"><p>xx</p><p>yy</p></div><h1>aaa</h1><div id="aaa"><p>xxx</p><p>yyy</p></div>