JavaScript - appendChild() method

revision:

Category : node

The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

If the given child is a DocumentFragment, the entire contents of the DocumentFragment are moved into the child list of the specified parent node.

"appendChild()" returns the newly appended node, or if the child is a DocumentFragment, the emptied fragment.

Syntax : 

        node.appendChild(aChild)

Parameters:

aChild : the node to append to the given parent node (commonly an element).

Examples: 

            const paragraph = document.body.appendChild(document.createElement("p"));
            // You can append more elements to the paragraph later
        
            // Create a new paragraph element, and append it to the end of the document body
            const p = document.createElement("p");
            document.body.appendChild(p);

Category : element

The appendChild() method of the Element interface adds a element (node) as the last child of an element.

Syntax : 

        element.appendChild(aChild)

Parameters:

aChild : required. The node to append to the given parent node (commonly an element).

Examples: 

            const node = document.createElement("li");
            const textnode = document.createTextNode("Water");
            node.appendChild(textnode);
            document.getElementById("myList").appendChild(node);
        
            const para = document.createElement("p");
            const node = document.createTextNode("This is a paragraph.");
            para.appendChild(node);
            document.getElementById("myDIV").appendChild(para);
        
            const para = document.createElement("P");
            const node = document.createTextNode("This is a paragraph.");
            para.appendChild(node);
            document.body.appendChild(para);

Practical examples

creating a nested DOM structure

code: 
                    <div>
                        <p id="child-1"></p>
                        <p id="child-2"></p>
                    </div>
                    <script>
                        const fragment = document.createDocumentFragment();
                        const li = fragment
                        .appendChild(document.createElement("section"))
                        .appendChild(document.createElement("ul"))
                        .appendChild(document.createElement("li"));
                        li.textContent = "Hello world";
                        document.getElementById("child-1").appendChild(fragment);
                    </script>

move an item from one list to another:

  • Coffee
  • Tea
  • Water
  • Milk

Click "Move" to move an item from one list to another:

code: 
                    <div>
                        <ul id="myList1">
                            <li>Coffee</li>
                            <li>Tea</li>
                        </ul>
                        <ul id="myList2">
                            <li>Water</li>
                            <li>Milk</li>
                        </ul>
                        <p>Click "Move" to move an item from one list to another:</p>
                        <button onclick="moveFunction()">Move</button>  
                    </div>
                    <script>
                        function moveFunction() {
                            const node = document.getElementById("myList2").lastElementChild;
                            document.getElementById("myList1").appendChild(node);
                        }
                    </script>

create a <p> element and append it to a <div> element:

Click "Append" create a paragraph and append it to myDIV:

I am myDIV

code: 
                    <div>
                        <p>Click "Append" create a paragraph and append it to myDIV:</p>
                        <button onclick="appendFunction()">Append</button>
                        <div id="myDIV">
                            <h4>I am myDIV</h4>
                        </div>
                    </div>
                    <script>
                        function appendFunction() {
                            // Create a p element:
                            const para = document.createElement("p");
                            // Create a text node:
                            const node = document.createTextNode("This is a paragraph.");
                            // Append text node to the p element:
                            para.appendChild(node);
                            // Append the p element to the body:
                            document.getElementById("myDIV").appendChild(para);
                        }
                    </script>