如何将两个相邻的DIV合并为一个？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将两个相邻的DIV合并为一个？相关的知识，希望对你有一定的参考价值。
html DOM
<div class="box-1">
...
</div>
<div class="box-2">
...
</div>
我可以使用javascript删除</div><div class="box-2">的这一部分吗？
任何帮助，谢谢！
答案
我认为它正在运行
var elmnt1 = document.getElementsByClassName("box-1")[0];
var elmnt2 = document.getElementsByClassName("box-2")[0];
elmnt1.appendchild(elmnt2);
elmnt2.remove();
另一答案
如果我没记错的话，您想将下一个同级的子代添加到前一个同级的子代中，并摆脱前一个。在这种情况下，请考虑以下输入：
<div class="box-1">
SomeText
<div>child</div>
</div>
<div class="box-2">
Some other text
<div>other child</div>
</div>
您可以编写此函数或类似的东西：
function transfer(node){
var next = node.nextElementSibling;
if(!next){return};
while(next.hasChildNodes()){
node.appendChild(next.firstChild)
}
next.parentNode.removeChild(next);
}
transfer(body.querySelector("div"));
您会得到：
<div class="box-1">
SomeText
<div>child</div>
Some other text
<div>other child</div>
</div>
另一答案
您可以获得box-2的html内容，然后将其附加到box-1中，最后删除box-2
另一答案
我在这里找到了：// https://gomakethings.com/removing-an-element-from-the-dom-with-vanilla-js/
该脚本删除了class =“ box-2”的div的第一次出现。如果要删除多个div，则需要基于document.querySelectorAll()的选择应用循环。
let ch=document.querySelector('.box-2');
ch.parentNode.removeChild(ch);<div class="box-1">
This is BOX 1
</div>
<div class="box-2">
This is BOX 2
</div>以上是关于如何将两个相邻的DIV合并为一个？的主要内容，如果未能解决你的问题，请参考以下文章