如何在長度改變的nodeList上使用insertBefore？

Question

我對JS很陌生，所以如果這很愚蠢，請原諒我，DOM工作對我來說很痛苦。

當我運行此命令時， if塊執行良好。 它添加了一個新節點，其長度為2。但是，當我嘗試添加另一個項目時， else塊將返回以下內容：

未發現NotFoundError：在“節點”上無法執行“ insertBefore”：要在其之前插入新節點的節點不是該節點的子節點。

這似乎不可能。 正確的方法是什么？

JS

'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 {
            todoItem.insertBefore(todoList.childNodes["1"], todoList);
        }
    return false;
}

標記

<!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>

Answer 1

您的insertBefore順序錯誤

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

https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

JS

'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;
}

參見https://jsfiddle.net/6j6a6eq8/1/

Answer 2

當您不使用前端框架時，可能會發生這種情況。 諸如react.js和Angular.js之類的前端監視DOM的更改並對其進行更新。 他們有點更新可用DOM項目的列表。 因此，當您添加項目時，瀏覽器不會意識到新節點的添加。 這就是瀏覽器給您錯誤的原因。

如何在長度改變的nodeList上使用insertBefore？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-12-17 06:59:36

解決方案2
-1 2015-12-17 06:59:40

如何在長度改變的nodeList上使用insertBefore？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-12-17 06:59:36

解決方案2 -1 2015-12-17 06:59:40

解決方案1
1 已采納 2015-12-17 06:59:36

解決方案2
-1 2015-12-17 06:59:40