HTML DOM appendChild() Method

The HTML DOM appendChild() method adds a new child node to the end of a specified parent node's child list. It can move existing nodes or add new nodes, allowing dynamic updates to the document structure by appending elements, text, or other nodes.

Syntax:

node.appendChild(node);

Parameters: This method accepts a single parameter node which is mandatory and used to specify the node object that needs to be appended.

Example 1: This example describes the use of the appendChild() method that will create the text node as the last child of the node.

Output:

Example 2: This example describes the use of the appendChild() method by appending the text to the document after clicking the submit button.

Output:

Used Methods with appendChild()

• document.createElement(): Creates a new HTML element specified by the tag name. If the element name is not recognized, an unknown HTML element is created.
• document.createTextNode(): Creates a text node containing a string. This method is used to add text to an element.
• document.getElementById(): Retrieves an element by its ID, allowing for targeted appending of nodes.

We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.

Supported Browsers: The browser supported by DOM appendChild() Method are listed below:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.