I fall in trouble to pass a html element to a javascript function.

The div what I try to delete and pass to the function, that contains two things, one is <input> element and another one is <p> element.

In this case, I am try to make a todo list, where I am trying to delete something, and it should delete from there, then appeared on other div. So, I pass the nodelist(denoted as node over here) to show_*delete_*items(node[i]), I thought it will be appeared in that div, but its not happening, whats wrong here, can anybody help me to elevate my wrong approach.

function delete_items() {
    console.log('delete items function got called!');

    let node = document.getElementsByClassName('check_box_div');
    console.log(node);
    // node
    // let n_0 = node[0].childNodes;
    // console.log(n_0[0].checked);
    // console.log(node[0].childNodes);

    for (let i = 0; i < node.length; i++) {
        let ch = node[i].childNodes;
        if (ch[0].checked === true) {
            console.log('This is true and removed!', i);
            // ch.
            console.log('parent element = ', ch.parentElement);
            console.log('node = ', node[i]);
            show_delete_items(node[i]);  //I try to pass this nodelist 
            /*
            when I print that node, it looks like this:    
            <div class="check_box_div" style="padding: 10px 15px; border-top: 1px solid black; border-bottom: 1px solid black; margin: 10px; display: flex; flex-direction: row; justify-content: space-between;"><input type="checkbox"><p class="para"> vbcfb </p></div>
*/

            ch[0].parentElement.remove();
        }
    }
}

function show_delete_items(it) {
    
    if (document.getElementsByClassName('del_div').length === 0) {


        let del_div = document.createElement('div');
        del_div.className = 'del_div';
        del_div.style.backgroundColor = 'green';
        del_div.style.width = '400px';
        del_div.style.height = 'auto';
        del_div.style.margin = 'auto';

        let main_container = document.body;
        main_container.appendChild(del_div);
    }
    let new_div = document.createElement('div');
    new_div.className = 'inner_div';
   
    new_div.appendChild(it.childNodes);
    // new_div.insertAdjacentHTML(it);

    let del_div_check = document.querySelector('.del_div');
    del_div_check.appendChild(new_div);

}

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

Showing this error message, when I try above code.

from show_delete_item function:

I tried

  1. new_div.append(it)

  2. let len = it.length;
        for (let i = 0; i < len; i++) {
            const element = it[i];
            console.log(i,' = ', element.value);
            new_div.appendChild(element);
        } //But this was not working
    
  3. new_div.appendChild(it[0]);
    new_div.appendChild(it[1]); //Error message showed : Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    
  4. new_div.insertAdjacentHTML(it);