JS调用insertBefore报错：参考节点非当前节点子节点排查

报错信息 #

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

复现表现 #

• 首次点击笔形图标触发名称编辑时，功能运行完全正常
• 第二次点击编辑时直接抛出上述DOMException错误
• 尝试替换为parentNode.insertBefore()写法调用，问题未解决

原问题代码 #

const taskEdit = document.getElementById('taskName'); // 文本容器div

function edit() {
  if (editBtn.classList.contains('fa-pen-line')) {
    const input = document.createElement('input');
    input.type = 'text';
    input.setAttribute('id', 'edited');
    input.classList =
      'bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-0';
    input.value = span.textContent;
    taskEdit.insertBefore(input, span);
    taskEdit.removeChild(span);
    editBtn.classList.replace('fa-pen-line', 'fa-check');
  }
  editBtn.addEventListener('click', () => {
    if (editBtn.classList.contains('fa-check')) {
      const input = document.getElementById('edited');
      const span = document.createElement('span');
      span.textContent = input.value;
      span.setAttribute('id', 'task');
      taskEdit.insertBefore(span, input);
      taskEdit.removeChild(input);
      editBtn.classList.replace('fa-check', 'fa-pen-line');
    }
  });
}
editBtn.addEventListener('click', edit);

问题根因 #

1. 事件重复绑定：每点击一次编辑按钮，edit()函数执行时就会给按钮新增一个click事件监听器，多次点击后会同时触发多段DOM操作逻辑，执行顺序完全混乱。
2. 失效DOM引用：代码中持有的span变量是第一次加载时的旧节点，第一次编辑完成后旧span已经被从DOM树移除，第二次进入编辑流程调用insertBefore(input, span)时，传入的参考节点根本不是taskEdit的子元素，直接触发报错。

修复后代码 #

const taskEdit = document.getElementById('taskName');
const editBtn = document.getElementById('editBtn');

// 仅绑定一次点击事件，所有编辑/保存逻辑统一处理
editBtn.addEventListener('click', () => {
  if (editBtn.classList.contains('fa-pen-line')) {
    // 每次进入编辑前实时查询当前存在的span节点，不使用已删除的旧引用
    const span = taskEdit.querySelector('#task');
    const input = document.createElement('input');
    input.type = 'text';
    input.id = 'edited';
    input.className = 'bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-0';
    input.value = span.textContent;
    taskEdit.insertBefore(input, span);
    taskEdit.removeChild(span);
    editBtn.classList.replace('fa-pen-line', 'fa-check');
    return;
  }

  if (editBtn.classList.contains('fa-check')) {
    // 保存时实时查询当前存在的input节点
    const input = document.getElementById('edited');
    const span = document.createElement('span');
    span.textContent = input.value;
    span.id = 'task';
    taskEdit.insertBefore(span, input);
    taskEdit.removeChild(input);
    editBtn.classList.replace('fa-check', 'fa-pen-line');
  }
});

关键修复点 #

• 删除edit()函数内部重复绑定事件的逻辑，避免多监听器同时触发冲突
• 每次执行DOM插入操作前，实时查询父容器下当前真实存在的参考节点，彻底废弃已被移除的失效DOM引用
• 补全编辑按钮元素的初始获取逻辑，消除变量未定义的隐性bug

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