html node is not getting appended

In the below program I am trying to append and remove child nodes to/from a parent node in html document.

I am trying to do this:

Once Node 1 button is clicked, check if parent has child node2. If yes, remove node2 child from parent. Then append node1.

My program works fine if node2 is already present as a child. However, if node2 is not already a child then node1 does not get appended at all. Where am I going wrong ?

Below is the code:

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

Steps to reproduce the problem:

Open the html page, then click on Node 1 button.

Solution

You have a semicolon in this line

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

This will always execute the code, whether node2 exists or not, but if you remove this then the code will not execute because node2 does not have an id.

You need to set the id like this

node2.id = 'node2';

There is also an error in this line, as you are not referencing an element that has been appended.

parent.removeChild(node2);

It should look like this

parent.removeChild(children[i]);

Also, you define this in multiple places.

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

As the parent doesn't seem to change you can just define this at the beginning of the script and avoid querying the DOM when not necessary.

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