How To Use insertBefore() Method Using JavaScript?

Nov 11, 2021 . Admin

Hello Friends,

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

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

Example : 1

<html>  
    <head>  
        <meta charset="utf-8">  
        <title>How To Use insertBefore() Method Using JavaScript? - MyWebtuts.com</title>  
    </head>  
    <body> 
        <h3>How To Use insertBefore() Method Using JavaScript? - MyWebtuts.com</h3> 
        <ul id="week">  
            <li>Sunday</li>  
            <li>Monday</li>  
            <li>Tuesday</li>  
            <li>Wednesday</li>  
            <li>Thursday</li> 
            <li>Saturday</li>  
        </ul>  
        <script>  
            let a1 = document.getElementById('week');  
            let add = document.createElement('li');  
            add.textContent = 'Friday';    
            week.insertBefore(add, a1.childNodes[10]);  
        </script>  
    </body>  
</html>

Output :

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

Example : 2

<html>  
    <head>  
        <meta charset="utf-8">  
        <title>How To Use insertBefore() Method Using JavaScript? - MyWebtuts.com</title>  
    </head>  
    <body> 
        <h3>How To Use insertBefore() Method Using JavaScript? - MyWebtuts.com</h3> 
        <ul id="number">  
            <li>One</li>  
            <li>Two</li>  
            <li>Three</li>  
            <li>Four</li>  
            <li>Five</li> 
            <li>Seven</li>  
        </ul>  
        <script>  
            let a1 = document.getElementById('number');  
            let add = document.createElement('li');  
            add.textContent = 'Six';    
            number.insertBefore(add, a1.childNodes[10]);  
        </script>  
    </body>  
</html>

Output :