html 节点没有被追加

Question

在下面的程序中，我试图在 html 文档中添加和删除子节点 to/from 父节点。

我正在尝试这样做：

单击 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>

重现问题的步骤：

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

Answer 1

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

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

下面我们来解决一下。

在删除之前检查天气元素是否存在。并将其删除。与其使用 removeChild(node) ，不如使用

removeChild(document.getElementById("correspondingId"))

以便将其从 DOM 中删除。

希望解决方案有所帮助。

Answer 2

你在这一行中有一个分号

if (children[i].id == 'node2'); 
{
    ...
}

无论 node2 是否存在，这将始终执行代码，但如果删除它，则代码将不会执行，因为 node2 没有 id。

您需要这样设置id

node2.id = 'node2';

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

parent.removeChild(node2);

它应该是这样的

parent.removeChild(children[i]);

此外，您在多个地方定义了它。

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

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

/*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);
}

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

html 节点没有被追加

html node is not getting appended

javascript

html

appendchild

removechild