Javascript 如果HTML容器包含特定元素，如何拆分它？

我需要找出我当前的

中是否有其他

元素，并将它们与其他数据分开。例如，我需要从以下位置传输HTML：

一些文本
其他文本

对此

一些文本
其他文本

此外，需要从

中删除的元素可能位于末尾，因此足以将结束

标记移动到其前面而不是后面

UPD： 我几乎解决了这个问题，但还有一个问题——如何只在元素的前面或末尾嵌入开始或结束标记

const splitter = function(element){
                let newObj = document.createElement("div");
                newObj.innerHTML = element.innerHTML;
                [...newObj.querySelectorAll("div.typo")].forEach(ele => {
                 if(ele.querySelectorAll("div.incut").length != 0){
             ele.querySelectorAll("div.incut").forEach(eles => {
               eles.before('</div>') //here
               eles.after('<div class="typo">') //and here
               })
             }
            })
        console.log(newObj)
        };

const splitter=函数（元素）{
设newObj=document.createElement（“div”）；
newObj.innerHTML=element.innerHTML；
[…newObj.querySelectorAll（“div.typo”）].forEach（ele=>{
if（元素查询选择器all（“div.incut”）.length！=0）{
ele.querySelectorAll（“div.incut”）.forEach（eles=>{
eles.before（“”）//这里
eles.after（“”）//在这里
})
}
})
console.log（newObj）
};

控制台：

<div class="typo">
  <p>Some text</p>
  "</div>"<div class="incut"> Incut text</div>"<div class="typo">"
  <p>Other text</p>
  </div>

一些文本

“包含文本”
其他文本

如果我理解正确，以下是步骤：

声明一个临时变量

lastMain

，它将是最后一个

.main

div，因此“队列”中的元素将附加到它。另外，

isLastNodeIframe

用于确定是否需要创建新的

.main

遍历所有元素。

• 如果它是一个iframe，您可以将它与

  parentNode.appendChild

  一起放入其父对象
• 如果是由代码缩进引起的空字符串，则忽略
• 如果不是

  iframe

  ：
  • 如果上一个标记是

    iframe

    ，请重新创建

    .main

  • 将子项追加到

    lastMain

const-app=document.querySelector（'.app'）；
const main=document.querySelector（'.main'）；
让拉斯曼；
设isLastNodeIframe=false；
Array.from（main.childNodes）.forEach（child=>{
if（子帧）{
isLastNodeIframe=true；
main.parentNode.appendChild（子级）；
}else if（isEmptyText（子项））{
返回；
}否则{
if（isLastNodeIframe）{
isLastNodeIframe=false；
lastMain=main.cloneNode（false）；
main.parentNode.appendChild（lastMain）；
}
if（lastMain）{
lastMain.appendChild（child）；
}
}
});
功能框架（元素）{
return element.tagName==='IFRAME'；
}
函数isEmptyText（元素）{
return！element.tagName&！element.textContent.trim（）；
}
console.log（app.innerHTML）

一些文本

其他文本1

其他文本2

无父文本
其他文本3

如果确定元素嵌套在

main

中，则可以使用

element.removeChild（）

，将其存储到变量中，然后在其他元素中重新创建。使用可用的。到目前为止你试过什么？是否存在任何约束，例如，

是否需要保留在DOM中（否则它会触发mutationobserver并可能丢失其事件侦听器）？@AdrianSolarczyk我需要将我的cut元素插入div中我发现它的其他元素之间。这就是问题所在…@user4642212所有事件侦听器对我来说都不重要，所以不，我可以创建3个新元素，而不是1。您是否考虑过其他选项，例如CSS？小心，

main.querySelectorAll（'*'）

匹配所有子体，而不仅仅是子体。我建议改为

.childNodes

，这样元素之间的文本节点也会得到考虑（

.tagName

需要另一个条件，例如

child.nodeType===document.ELEMENT\u NODE

）。此外，如果后面没有其他元素，则会在

之后放置一个空的

。谢谢一切都很好，谢谢，但有一句话-您的代码只返回第一个元素，我试图修改它，因为页面上可能有几个这样的元素，它们需要全部处理，但我没有成功。非常感谢您的帮助您所说的第一个元素是什么意思？另一个

.main

元素？请创建一个演示（使用或等），我会尽力帮助您。这更具挑战性：）我最终得到：1。对每个

.main

执行逻辑。2.为了隔离每个

.main

（不扰乱顺序），每个

.main

在开始时包装，并在其子级操作后展开。