Question

在下面的程序中，我试图在html文档中追加并从子节点中删除子节点。

我正在尝试这样做：

点击Node 1按钮后，检查父级是否有子node2。如果是，请从父级中删除node2子级。然后追加node1。

如果小时候已经存在node2，我的程序就可以正常运行。但是，如果node2不是child，则node1根本不会附加<!DOCTYPE HTML> <html lang="en-US"> <head> <title>practice</title> </head> <body> <div> <h3>Nodes ...</h3> <br/><br/> <button type="button" onclick="func_node1()">Node 1</button> <button type="button" onclick="func_node2()">Node 2</button> <br/><hr/> <div id="display"> <p id="p1"></p> </div> </div> <script> /*Create two nodes 'node1' and 'node2' with some text in them*/ var node1 = document.createElement("p"); var node1_text = document.createTextNode("ONE 1 NODE"); node1.appendChild(node1_text); var node2 = document.createElement("p"); var node2_text = document.createTextNode("TWO 2 NODE"); node2.appendChild(node2_text); /*Issue in this function*/ function func_node1() { var parent = document.getElementById("display"); var children = parent.childNodes; var i; for(i=0; i<children.length; i++) { if(children.item(i).id == 'node2'); { parent.removeChild(node2); break; } } parent = document.getElementById("display"); parent.appendChild(node1); //document.write("CLEAR"); } function func_node2() { var parent = document.getElementById("display"); parent.appendChild(node2); } </script> </body>。我哪里错了？

以下是代码：

Node 1

重现问题的步骤：

打开html页面，然后点击{{1}}按钮。

Answer 1

这不起作用，因为节点2是新创建的元素，并且在将其附加到父节点之前它不是DOM的一部分。这就是为什么它会给你一个错误说

Uncaught NotFoundError：无法在'Node'上执行'removeChild'：The 要删除的节点不是此节点的子节点。

现在我们将为此解决问题。

在删除检查天气之前，元素是否存在。并删除它。而不是使用removeChild（节点），最好使用

removeChild之（的document.getElementById（ “相应的识别”））

以便将其从DOM中删除。

希望解决方案有所帮助。

Answer 2

此行中有分号

listOfDict = [dict1,dict2,dict3]

db.batch.insert_many(listOfDict)

这将始终执行代码，无论是否存在if (children[i].id == 'node2'); { ... }，但如果删除此代码，则代码将无法执行，因为node2没有id。

您需要像这样设置node2

id

此行中也有错误，因为您没有引用已追加的元素。

node2.id = 'node2';

看起来应该是这样的

parent.removeChild(node2);

另外，您可以在多个位置定义它。

parent.removeChild(children[i]);

由于父母似乎没有改变，你可以在脚本的开头定义它，避免在没有必要时查询DOM。

＆＃13;

var parent = document.getElementById("display");

＆＃13;

/*Create two nodes 'node1' and 'node2' with some text in them*/
var parent = document.getElementById("display");

var node1 = document.createElement("p");
var node1_text = document.createTextNode("ONE 1 NODE");
node1.id = 'node1';
node1.appendChild(node1_text);

var node2 = document.createElement("p");
var node2_text = document.createTextNode("TWO 2 NODE");
node2.id = 'node2';
node2.appendChild(node2_text);
/*Issue in this function*/
function func_node1() {
    var children = parent.childNodes, i;
    for (i = 0; i < children.length; i++) {
        if (children[i].id == 'node2') {
            parent.removeChild(children[i]);
            break;
        }
    }
    parent.appendChild(node1);
}

function func_node2() {
    parent.appendChild(node2);
}

＆＃13;

html节点没有被追加

2 个答案: