Question

我对js很陌生，所以请原谅我，如果这是愚蠢的，DOM工作对我来说是一件痛苦的事。

当我运行它时，ng-options="i.info[0].title for i in share.videos"块执行正常。它添加了一个新节点，使长度为2.但是当我尝试添加另一个项时，if块返回：

Uncaught NotFoundError：无法执行＆＃39; insertBefore＆＃39; on＆＃39; Node＆＃39;：要插入新节点的节点不是其子节点这个节点。

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

JS

else

标记

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

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 个答案: