如何在JavaScript函数中传递HTML元素？待办列表报错排查

问题场景 #

开发待办列表功能时，需要将勾选状态的目标div（包含<input>和<p>元素）从原位置移除，再添加到页面的另一个div中。尝试将node[i]传递给show_delete_items(node[i])函数后未实现预期效果，且触发错误：

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

已尝试的无效方法 #

• new_div.append(it)
• 循环遍历it的子元素并逐个执行appendChild
• 直接执行new_div.appendChild(it[0])和new_div.appendChild(it[1])
• new_div.insertAdjacentHTML(it)

现有代码 #

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

}

问题分析与修复方案 #

核心错误原因 #

1. it.childNodes是NodeList集合而非单个节点：appendChild仅接受单个Node类型参数，直接传递节点集合会触发类型错误。
2. 动态集合遍历异常：getElementsByClassName返回的是动态HTMLCollection，循环中元素被移除会导致集合长度实时变化，引发遍历逻辑混乱。
3. 冗余的元素移除操作：DOM元素无法同时存在于两个父节点下，调用appendChild会自动将元素从原位置迁移，无需手动执行remove()。
4. 不可靠的节点获取方式：childNodes会包含文本节点（如换行、空格），可能导致ch[0]并非目标复选框。

修复后的代码 #

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

  // 将动态集合转为数组，避免遍历中集合变化的问题
  let nodes = Array.from(document.getElementsByClassName('check_box_div'));
  
  for (let i = 0; i < nodes.length; i++) {
    // 用querySelector精准获取复选框，避免文本节点干扰
    let checkbox = nodes[i].querySelector('input[type="checkbox"]');
    if (checkbox.checked) {
      console.log('This is true and moved!', i);
      show_delete_items(nodes[i]);
    }
  }
}

function show_delete_items(it) {
  // 优先查找已存在的del_div，不存在则创建
  let del_div = document.querySelector('.del_div');
  if (!del_div) {
    del_div = document.createElement('div');
    del_div.className = 'del_div';
    // 用Object.assign简化样式设置
    Object.assign(del_div.style, {
      backgroundColor: 'green',
      width: '400px',
      height: 'auto',
      margin: 'auto'
    });
    document.body.appendChild(del_div);
  }
  
  let new_div = document.createElement('div');
  new_div.className = 'inner_div';
  // 直接传递单个节点it，appendChild会自动完成迁移
  new_div.appendChild(it);
  
  del_div.appendChild(new_div);
}

关键优化点 #

• 静态数组遍历：将HTMLCollection转为数组，避免动态集合在遍历过程中长度变化的问题。
• 精准节点选择：使用querySelector获取复选框，比childNodes更稳定，不受文本节点影响。
• 自动DOM迁移：利用DOM元素的唯一性，通过appendChild自动完成元素从原位置到目标位置的迁移，省去手动移除步骤。
• 简化元素创建逻辑：先查找目标容器再决定是否创建，减少冗余判断。

内容的提问来源于stack exchange，提问作者Tareq