无法在“节点”上执行“插入前”：参数 1 在 Javascript 上不是“节点”类型

Question

我试图通过单击一个按钮来插入整个 HTML 元素，它确实有效，但它应该是一个可拖动元素，就像手动插入 HTML 作为示例一样，但是当尝试拖动我在控制台上收到此错误：无法在 'Node' 上执行 'insertBefore'：参数 1 不是 'Node' 类型

拖动函数是这样写的：

dropzones.forEach(dropzone => {
    dropzone.addEventListener('dragover', e => {
        e.preventDefault
        const draggable = document.querySelector('.dragging')
        const afterElement = getDragAfterElement(dropzone, e.clientY)
        if (afterElement == null) {
            dropzone.appendChild(draggable)
        } else {
            dropzone.insertBefore(draggable, afterElement)
        }
    })
})

这是我尝试添加元素的方式：

addTaskButton.addEventListener("click", () => {
    let title = prompt('Set the title');
    let description = prompt('Set the description');
    const date = new Date().toLocaleDateString();

    let html = 
    <div class="draggable card" draggable="true">
        <div class="card-wrapper">
            <div class="card-header">
                <p>${date}</p>
                <div class="card-bullet"></div>
            </div>
        
            <h2 id="task-title">${title}</h2>
            <div class="task-members">
                <div class="task-member img"></div>
                <div class="task-member img"></div>
                <div class="task-member add"></div>
            </div>
        
            <div class="task-text">
                <h3>Description</h3>
                <p>${description}.</p>
            </div>
        </div>
    </div> 

    board.innerHTML += html
})

非常感谢您！

Answer 1

很可能是因为您要在 DOM 中插入的节点（第一个参数）为空或未定义。 您可以通过运行重现此错误：

document.body.insertBefore(null, document.body.firstChild); 

您必须检查返回对draggable 的元素引用的行：

document.querySelector('.dragging') // must be not null, you can run in console and/or debug using the devtools to see what is happening