Funciona perfectamente por primera vez cuando hago clic en el icono del lápiz para cambiar el nombre, pero cuando lo hago por segunda vez, aparece este error. Probé parentNode.insertBefore() pero no funciona tan bien

Aquí está mi código index.js para la funcionalidad del botón de edición

 const taskEdit = document.getElementById('taskName'); #its just a div with a default text 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

Aquí hay una imagen para lo mismo, cuando hago clic en pen con para cambiar el nombre, lo cambia con éxito por primera vez, pero me da este error de excepción DOM si intento cambiarlo nuevamente