for循环中的AppendChild每隔一个孩子添加一次？

Question

我需要将子元素包装在 wrap-of-parent 中。在包装之前为父元素和子元素添加一些属性。在下面描述的代码中，如果孩子在单独的一行中位于另一个之下，并且如果它们在一行中，则所有其他孩子都插入到父包裹中。为什么会发生这种情况以及如何解决？

我明白了：

<div id="container">
<div id="parent1">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="wrap-of-parent1">
        <div id="child3"></div>
        <div id="child4"></div>
    </div>
</div>

我需要得到：

<div id="container">
<div id="parent1">
    <div id="wrap-of-parent1">   
        <div id="child1"></div>
        <div id="child2"></div>
        <div id="child3"></div>
        <div id="child4"></div>
    </div>
</div>

代码：

   var container = document.getElementById("container");
   const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in
 
     for (let parent of parentDivs) {
     // create a new div
     let wrap = document.createElement('div');
     wrap.id = 'wrap-of-' + parent.id;
      // move the parent's children to it
     let children = parent.childNodes;
     
     for (let i = 0; i < children.length; i++) {
     if (children[i].nodeType === Node.ELEMENT_NODE) {
         children[i].setAttribute("data", "somedata");
         wrap.append(children[i]);
     }}
     // and append it to the parent
         parent.appendChild(wrap);
     }

<div id="container">
    <div id="parent1">
        <div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div>
    </div>
</div>
<! - If the child elements are one below the other in a separate row it works, if they are in one row it does not work ->

Answer 1

如果您继续移动第一个（索引 0）条目，它将起作用。当遇到错误的 nodeType 时需要添加偏移量以跳过那些，如果没有子节点则不处理该节点：

var container = document.getElementById("container");
const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in

for (let parent of parentDivs) {
    // create a new div
    if (parent.childNodes.length > 0) {
        let wrap = document.createElement('div');
        wrap.id = 'wrap-of-' + parent.id;
        // move the parent's children to it
        let children = parent.childNodes;
        
        const nChildren = children.length;
        let offset = 0;
    
        for (let i = 0; i < nChildren; i++) {
            if (children[offset].nodeType === Node.ELEMENT_NODE) {
                children[offset].setAttribute("data", "somedata");
                wrap.append(children[offset]);
            } else {
                offset++;
            }
        }
        // and append it to the parent
        parent.appendChild(wrap);
    }
}

<div id="container">
    <div id="parent1">
        <div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div>
    </div>
</div>