为每个父母创建一个 div？

问题描述

我需要用 div 包裹父级的所有子级。在下面的示例中，我设法在每个父级之后放置了一个 div 标签，但如何在 chidrens 的末尾放置一个结束 /div 标签。

我尝试使用 document.createElement，现在使用 insertAdjacentHTML ...，解决此问题的最佳方法是什么，或者对其进行编码的最佳方法是什么？

     var divs = document.getElementById("container").querySelectorAll('.activ-window *'); 
     var elements = "";
     divs.forEach(function(elem){
         if (elem.firstChild) {
                    
          elements += elem.insertAdjacentHTML("afterbegin",'<div id="afterParent" style="display:block;">');
                      elem.insertAdjacentHTML("afterend",'</div>');
         }
     });
     document.getElementById("demo").innerHTML = elements;

<div id="container" class="activ-window">

    <div id="parent1">
        <div id="child" ></div>
        <div id="child" ></div>
    </div>
    <div id="parent2">
        <div id="child" ></div>
        <div id="paren3" >
             <div id="child" ></div>
             <div id="child" ></div>
             <div id="child" ></div>
        </div>
    </div>

</div>

它应该是这样的：

<div id="container" class="activ-window">

    <div id="parent1">
        <div id="afterParent" style="display:block;">
        <div id="child" ></div>
        <div id="child" ></div>
        </div>
    </div>
    <div id="parent2">
        <div id="afterParent" style="display:block;">
        <div id="child" ></div>
        </div>
        <div id="paren3" >
        <div id="afterParent" style="display:block;">
             <div id="child" ></div>
             <div id="child" ></div>
             <div id="child" ></div>
        </div>
        </div>
    </div>

</div>

为尼克编辑： 这是带有文本的（参见 Parent1）：

    <div id="parent1">Parent1
        <div id="child" >child1</div>
        <div id="child" >child1</div>
    </div>

我用你的代码得到它

    <div id="parent1">
        <div id="afterParent" style="display:block;">
        "Parent1"
        <div id="child" >Child1</div>
        <div id="child" >Child1</div>
        </div>
    </div>

它应该看起来：

    <div id="parent1">Parent1
        <div id="afterParent" style="display:block;">
        <div id="child" >Child1</div>
        <div id="child" >Child1</div>
        </div>
    </div>

解决方法

如果您想将每个父项下的所有 div 包含在一个新的 div 中，您可以创建一个新的 div 元素，将所有非文本子项移动到它，然后将该 div 作为子项添加到原始父项中：

const container = document.getElementById("container");
const parentDivs = container.querySelectorAll('.activ-window div[id^="parent"]');

for (let parent of parentDivs) {
  // create a new div
  let after = document.createElement('div');
  after.id = 'after' + parent.id;
  after.style.display = 'block';
  // move the parent's non-text children to it
  let children = parent.childNodes;
  for (let i = 0; i < children.length; i++) {
    if (children[i].nodeType != Node.TEXT_NODE) {
      after.append(children[i]);
    }
  }
  // and append it to the parent
  parent.appendChild(after);
}

console.log(container.innerHTML);

<div id="container" class="activ-window">
  <div id="parent1">
    Parent1
    <div id="child1"></div>
    <div id="child2"></div>
  </div>
  <div id="parent2">
    Parent2
    <div id="child3"></div>
    <div id="parent3">
      <div id="child4"></div>
      <div id="child5"></div>
      <div id="child6"></div>
    </div>
  </div>
</div>