我需要将节点列表从一个父节点移动到另一个父节点答案

【问题标题】：I need to move a node list from one parent to another我需要将节点列表从一个父节点移动到另一个父节点
【发布时间】：2023-03-10 19:55:02
【问题描述】：

当我到达一个特定断点时，我正试图移动一个节点列表（在我的例子中是类名为“.images”的 img HTML 标记）到另一个父节点作为该新父节点的第一个子节点。

/* BEFORE BREAKPOINT */
<div class="old-parent">
   <img class="images">
   <div class="new-parent">
   </div>
</div>

<div class="old-parent">
   <img class="images">
   <div class="new-parent">
   </div>

</div>

<div class="old-parent">
   <img class="images">
   <div class="new-parent">
   </div>
</div>

/*AFTER REACHING THE BREAKPOINT*/

<div class="old-parent">
   <div class="new-parent">
     <img class="images">
   </div>
</div>

<div class="old-parent">
   <div class="new-parent">
     <img class="images">
   </div>
</div>

<div class="old-parent">
   <div class="new-parent">
     <img class="images">
   </div>
</div>

到目前为止，当我使用单个选择器时工作正常，但是当我尝试全选并将它们转移到新的父级时不起作用。

const newParent = document.querySelectorAll('.new-parent');
const images = document.querySelectorAll('.images');
const mediaQ = window.matchMedia('(max-width: 494px)');

const changeImg = (e) => {
    if (e.matches) {
        newParent.forEach(elem => {
            elem.insertBefore(images, elem.childNodes[0]);
        })
    }
};

mediaQ.addEventListener('change', changeImg);

然后在控制台返回错误：

未捕获的类型错误：无法在“节点”上执行“插入前”：参数 1 不是“节点”类型

【问题讨论】：

标签： javascript html javascript-objects

【解决方案1】：

您需要索引images 才能一次移动一张图像。

const changeImg = (e, i) => {
    if (e.matches) {
        newParent.forEach(elem => {
            elem.insertBefore(images[i], elem.childNodes[0]);
        })
    }
};

【讨论】：