Horje
What is appendChild in JavaScript ?

In JavaScript, the appendChild() method is used to append a new child node to the end of the list of children of the specified parent node. This method is commonly used in DOM manipulation to add new elements to an existing HTML structure dynamically.

Syntax:

selectedElement.appendChild(newChild);

Parameters:

  • newChild: The new child node that will be appended to the selected element.

Return Value:

The appendChild() method does not return anything instead it appends the new child element to the selected element.

Example 1: The below code is a basic implementation of the appendChild() method to append a child element.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>AppendChild Example</title>
    <style>
        #container{
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <p>
            This is the existing content of
            the container.
        </p>
    </div>
    <script>
        const paragraph1 =
            document.createElement('p');
        paragraph1.textContent =
            `This is a new paragraph element.
             Added using appendChild() method.`;
        document.getElementById('container').
            appendChild(paragraph1);
    </script>
</body>
 
</html>

Output :

Output

Example 2: The below code will explain the use of the appendChild() method to add content on click to the button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>AppendChild Example</title>
    <style>
        #container {
            text-align: center;
        }
 
        button {
            background-color: green;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <p>
            This is the existing content of
            the container.
        </p>
        <button id="btn">
            Click to add content
        </button>
    </div>
    <script>
        const btn = document.getElementById('btn');
        btn.addEventListener('click', () => {
            const paragraph1 =
                document.createElement('p');
            paragraph1.textContent =
                `This is a new paragraph element.
                Added using appendChild() method.`;
            document.getElementById('container').
                appendChild(paragraph1);
        });
    </script>
</body>
 
</html>

Output :

appendChildGIF


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Infer Return Type from a Tuple Parameter ? How to Infer Return Type from a Tuple Parameter ?
How to Type Dynamic Object with Methods with Dynamic Argument Count ? How to Type Dynamic Object with Methods with Dynamic Argument Count ?
Print all Positive Numbers in JavaScript Array Print all Positive Numbers in JavaScript Array
Print all Negative numbers in a Range in JavaScript Array Print all Negative numbers in a Range in JavaScript Array
How to Sort a Multidimensional Array in JavaScript by Date ? How to Sort a Multidimensional Array in JavaScript by Date ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 15



 

Horje