Javascript 如何在长度发生变化的节点列表上使用insertBefore？_Javascript

Javascript 如何在长度发生变化的节点列表上使用insertBefore？

javascript

Javascript 如何在长度发生变化的节点列表上使用insertBefore？,javascript,Javascript,我是js的新手，所以请原谅我的愚蠢，DOM工作对我来说是一种痛苦当我运行此命令时，if块执行良好。它添加了一个新节点，使长度为2。但是，当我尝试添加另一项时，else块返回以下内容：未捕获NotFoundError:未能在“节点”上执行“insertBefore”：要在其前面插入新节点的节点不是的子节点这个节点这似乎是不可能的。正确的方法是什么 JS 加价 <!DOCTYPE html> <html lang="en"> <head> <

我是js的新手，所以请原谅我的愚蠢，DOM工作对我来说是一种痛苦

当我运行此命令时，

if

块执行良好。它添加了一个新节点，使长度为2。但是，当我尝试添加另一项时，

else

块返回以下内容：

未捕获NotFoundError:未能在“节点”上执行“insertBefore”：要在其前面插入新节点的节点不是的子节点这个节点

这似乎是不可能的。正确的方法是什么

加价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <form onsubmit="return todoSubmit()" id="todo-form">
        <input id="todo-form-text" type="text">
        <input id="todo-form-submit" type="submit">
    </form>

    <div id="todo-list">
    </div>

    <script src="script.js"></script>
</body>
</html>


文件

您的insertBefore顺序错误

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

请参见您的insertBefore顺序错误

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

请参阅不使用前端框架时可能出现的问题。像react.js和Angular.js这样的前端可以监视DOM的变化并对其进行更新。他们会更新可用DOM项的列表。因此，当您添加项目时，浏览器不会意识到添加了新节点。这就是浏览器显示错误的原因。

当您不使用前端框架时，可能会发生错误。像react.js和Angular.js这样的前端可以监视DOM的变化并对其进行更新。他们会更新可用DOM项的列表。因此，当您添加项目时，浏览器不会意识到添加了新节点。这就是浏览器显示错误的原因。

Ugh。。。我读了MDN，不知道我是怎么误读的。我一直在犯最愚蠢的错误，哈哈。谢谢你的帮助。啊。。。我读了MDN，不知道我是怎么误读的。我一直在犯最愚蠢的错误，哈哈。谢谢你的帮助。

'use strict';

let todoList = document.getElementById("todo-list");

let todoSubmit = () => {
    // User input
        let todoTextInput = document.getElementById("todo-form-text").value;
    // New item
        let todoItem = document.createElement("span");
        let todoItemInput = document.createElement("input");
        todoItemInput.setAttribute("type", "hidden");
        let todoText = document.createTextNode(todoTextInput);
        let todoLineBreak = document.createElement("br");
        todoItem.appendChild(todoItemInput);
        todoItem.appendChild(todoText);
        todoItem.appendChild(todoLineBreak);
    // Add to list
        if (todoList.childNodes.length === 1) {
            todoList.appendChild(todoItem);
        } else {
            todoList.insertBefore(todoItem, todoList.childNodes[1]);
        }
    return false;
}