Comment ajouter un nouveau li à ul en utilisant javascript ?

Published: 03 octobre 2022

Tags: Javascript; HTML; DOM;

DMCA.com Protection Status

Exemples de comment ajouter un nouveau li à ul en utilisant javascript:

Créer une simple page HTML

Considérons la page html suivante :

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <ul id="mylist">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>

        <script>

        </script>

    </body>
</html>

Le but est d'ajouter 'item-4' à l'ul avec l'id = "mylist" en utilisant javascript uniquement.

Ajouter li à ul en utilisant javascript

Pour ce faire, une solution consiste à sélectionner l'élément ul :

var ul = document.getElementById("mylist");

puis créez un nouvel élément li

var li = document.createElement("li");

et créer un texte par exemple

var text = document.createTextNode('item 4 (added using javascript)');

Attachez le texte à l'élément li :

li.appendChild(text);

et enfin ajouter l'élément li à l'élément ul :

ul.appendChild(li);

Solution:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>

            <ul id="mylist">
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>

            <script>

            </script>

        </body>
    </html>

    <script type="text/javascript">

        console.log('Append a new item to mylist');

        var ul = document.getElementById("mylist");
        var li = document.createElement("li");
        var text = document.createTextNode('item 4 (added using javascript)');

        li.appendChild(text);
        ul.appendChild(li);

    </script>

Ajouter li comprenant un lien

Un autre exemple avec un lien au lieu du texte à l'intérieur de l'élément li :

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <ul id="mylist">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>

        <script>

        </script>

    </body>
</html>

<script type="text/javascript">

    console.log('Append a new item to mylist');

    var ul = document.getElementById("mylist");
    var li = document.createElement("li");

    var a = document.createElement('a');
    var linkText = document.createTextNode('mylink');
    a.appendChild(linkText);
    a.href = '#'

    li.appendChild(a);
    ul.appendChild(li);

</script>

En utilisant innerHTML

Une autre solution utilisant innerHTML pour ajouter un nouveau li :

<!DOCTYPE html>
<html lang="en" dir="ltr">
        <head>
                <meta charset="utf-8">
                <title></title>
        </head>
        <body>

                <ul id="mylist">
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                </ul>

                <script>
                    var ul = document.getElementById("mylist");
                    document.querySelector("#mylist").innerHTML += `<li>item 4</li>` 
                </script>

        </body>
</html>

On peut aussi réécrire entièrement l'ul avec javascript:

<!DOCTYPE html>
<html lang="en" dir="ltr">
        <head>
                <meta charset="utf-8">
                <title></title>
        </head>
        <body>

                <ul id="mylist">
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                </ul>

                <script>
                    var ul = document.getElementById("mylist");
                    document.querySelector("#mylist").innerHTML = `
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    <li>item 5</li>
                    <li>item 6</li>`
                </script>

        </body>
</html>

Références