for循环中的AppendChild每秒添加child？

Question

我需要在 wrap-of-parent 中包装 children 元素。在包装之前向 parent 和 child 元素添加一些属性。在下面描述的代码中，如果 children 在单独的一行中一个在另一个下面，则一切正常，如果它们在一行中，则每隔一个 child 插入到 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>

for循环中的AppendChild每秒添加child？

AppendChild in for loop adds every second child?

javascript

children

for-loop

wrapper

appendchild