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

Question

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

我要移动的按钮的代码是：

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应该具有用户检查过的所有列表元素，然后单击按钮后，应将此元素移到父级“ standard”。我已经尝试过这样做，但是我无法在toClone或toClone [i]中使用cloneNode。

Answer 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.
        // Do your stuff here
    }
})

Answer 2

所以阅读完您的问题后，我建议您观看或阅读一些有关JavaScript的指南。花一些时间学习后，您会遇到一些明显的问题。

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

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

2]您的行let toClone在for循环内定义，并且作用域也是如此。在for循环之外将不可用。

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