How To Use appendchild() Method In JavaScript

Nov 08, 2021 . Admin

Hello Friends,

Now let's see example of how to use appendchild() method example. Here you will learn how to use javascript appendchild() method. This is a short guide on appendchild() method. Let's get started with how to find appendchild() method in javascript.

Here i will give you many example how you can use appendchild() method javascript.

Example : 1

<!DOCTYPE html>  
<html>  
    <head>  
        <title>How To Use appendchild() Method In JavaScript - MyWebtuts.com</title> 
    </head>   
    <body> 
        <h2>JavaScript appendChild() Method Example - MyWebtuts.com</h2>  
            
        <ul id="lang" style="list-style: square;">  
            <li>PHP</li>  
            <li>JavaScript</li>  
            <li>JQuery</li>  
        </ul>  
        <button onclick="append()">Append</button>  
        
        <script>  
            function append(){  
                var node = document.createElement("LI");  
                var textnode = document.createTextNode("Laravel");  
                node.appendChild(textnode);  
                document.getElementById("lang").appendChild(node);  
            }  
        </script>  
    </body>  
</html>

Output :

PHP
JavaScript
JQuery
Laravel
Laravel

Example : 2

<!DOCTYPE html>  
<html>  
    <head>  
        <title>How To Use appendchild() Method In JavaScript - MyWebtuts.com</title> 
    </head>   
    <body> 
        <h2>JavaScript appendChild() Method Example - MyWebtuts.com</h2>  
            
        <ul id="a1">  
            <li>Laravel</li>  
            <li>JavaScript</li>  
            <li>JQuery</li>  
        </ul>  
        <ul id="a2">  
            <li>PHP</li>  
            <li>CSS</li>  
            <li>HTML</li>  
        </ul>  
        
        <script>  
            function createMenuItem(lang){  
                let li = document.createElement('li');  
                li.textContent = lang;  
                return li;  
            }  
            const A1 = document.querySelector('#a1');  
            const laravel = A1.firstElementChild;  
            const A2 = document.querySelector('#a2');  
            A2.appendChild(laravel)    
        </script>  
    </body>  
</html>

Output :