如何将html元素从数组克隆到新的父元素答案

【问题标题】：How to clone html elements from array to new parent element如何将html元素从数组克隆到新的父元素
【发布时间】：2020-06-17 11:00:48
【问题描述】：

我有一个任务要做 - 待办事项清单。我有一个问题，因为我不知道如何将元素从父“优先级”移动到父“标准”。

我的按钮移动代码是：

moveToStandardButton.addEventListener('click', function() {
    const allListElements = document.querySelectorAll('[data-id="move"]');
    for (let i = 0; i < allListElements.length; i++) {
        let toClone = allListElements[i].checked;
    }
})

toClone 应该包含用户检查的所有列表元素，然后单击按钮后，它应该将此元素移动到父“标准”。我试过这样做，但我不能在 toClone 或 toClone[i] 处使用 cloneNode。

【问题讨论】：

标签： javascript html arrays dom

【解决方案1】：

如果你记录toClone，它可能是一个布尔值（真或假），因为它正在拉取元素是否为checked。

尝试以下方法：

moveToStandardButton.addEventListener('click', function() {
    // Get all elements that have a data-id of move
    // I'm assuming these elements are the ones that need to move ;)
    const allListElements = document.querySelectorAll('[data-id="move"]');
    // iterate through the elements that need to move
    for (let i = 0; i < allListElements.length; i++) {
        let toClone = allListElements[i]; // Note that 'checked' isn't involved
        if(!toClone.checked) continue; // If the element isn't checked, move to next element.
        const clonedEl = toClone.cloneNode(true);
        document.querySelector('#myOtherList').appendChild(clonedEl);
    }
})

【讨论】：

好的，我明白这一点，但是如果我想克隆这个被检查的元素并将其移动到另一个父元素，我该怎么办？
@hvma411 我已经扩展了答案以包含它。

【解决方案2】：

因此，在阅读了您的问题后，我建议您观看或阅读一些 JavaScript 指南。你有一些明显的问题，一旦你花一些时间学习，这些问题就会变得非常明显。

也就是说，我可以提供一些帮助，为您指明正确的方向。

1) 不建议使用数据属性作为元素标识符。我会改用一个类，而不是data-id="move"

2) 您的行 let toClone 是在 for 循环内定义的，并且范围也是如此。它在 for 循环之外不可用。

3) 尝试在 for 循环之外创建一个数组，并将每个选中的元素存储在其中，然后在循环之后对它们进行操作。

【讨论】：