Как разбить контейнер HTML, если он содержит определенный элемент c?

Question

Мне нужно выяснить, есть ли другие элементы <div> или <iframe> в моем текущем <div>, и отделить их от других данных. Например, мне нужно передать HTML из этого:

<div class="main">
  <p>Some text<p>

  <iframe src="test.com"/>

  <p>Other text<p>
</div>

в этот

<div class="main">
  <p>Some text<p>
</div>

<iframe src="test.com"/>

<div class="main">
  <p>Other text<p>
</div>

Кроме того, элемент, который необходимо удалить из <div>, может быть конец, поэтому достаточно будет переместить закрывающий тег </div> перед ним, а не после него.

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)
        };

console:

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

Answer 1

Если я вас правильно понял, вот шаги:

1. Объявите временную переменную lastMain, которая будет последним .main div, чтобы элементы в «очереди» добавлялись к Это. Также isLastNodeIframe, чтобы определить, нужно ли создавать новый .main.
2. Перебирать все элементы.
   • Если это iframe, вы помещаете его с parentNode.appendChild в его родительский элемент.
   • Если это пустая строка, вызванная отступом кода, игнорируйте.
   • Если это не iframe:
     • Если предыдущий тег был iframe, заново создайте .main.
     • Добавьте дочерний элемент в lastMain.

const app = document.querySelector('.app');
const main = document.querySelector('.main');
let lastMain;
let isLastNodeIframe = false;
Array.from(main.childNodes).forEach(child => {
  if (isIframe(child)) {
    isLastNodeIframe = true;    
    main.parentNode.appendChild(child);
  } else if (isEmptyText(child)) {
    return;
  } else {
    if (isLastNodeIframe) {
      isLastNodeIframe = false;
      lastMain = main.cloneNode(false);
      main.parentNode.appendChild(lastMain);
    }

    if (lastMain) {
      lastMain.appendChild(child);
    }
  }
});

function isIframe(element) {
  return element.tagName === 'IFRAME';
}

function isEmptyText(element) {
  return !element.tagName && !element.textContent.trim();
}

console.log(app.innerHTML)

<div class="app">
  <div class="main">
    <p>Some text</p>
    <iframe></iframe>
    <p>Other text1</p>
    <p>Other text2</p>
    text without parent
    <iframe></iframe>
    <p>Other text3</p>
    <iframe></iframe>
  </div>
</div>

Если что-то не понятно, дайте мне знать.