How to clone html elements from array to new parent element

user_12774913 0
Viewed 130

I've got a task to do - to do list. I have a problem because i don't know how to move elements from parent "priority" to parent "standard".

My code of button to move is:

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 shoud have all list elements which are checked by user and then after click button it should move this elements to parent "standard". I've tried to do it like this but i can't use cloneNode at toClone or toClone[i].

arrays dom html javascript
2 Answers

If you log toClone, it is probably a boolean (true or false), as it is pulling whether the element is checked.

Try the following:

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);
    }
})
user_130081970

So after reading your question, I would recommend you watch or read some guides on JavaScript. You have some glaring issues that will become very apparent once you spend some time learning.

That said, I can lend some help to point you in the right direction.

1) It is not recommended to use data attributes as element identifiers. I would instead use a class, rather than data-id="move"

2) Your line let toClone is defined inside the for loop, and is scoped as such. It will not be available outside of the for loop.

3) Try creating an array outside of your for loop, and storing each checked element inside of it, and then operating on them after your loop.

user_76926590
Related