Comment ajouter un nouveau li à ul en utilisant javascript ?

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

Table des matières

Créer une simple page HTML
Ajouter li à ul en utilisant javascript
Ajouter li comprenant un lien
En utilisant innerHTML
Références

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

Liens	Site
javascript create li element and append to ul” Code Answer	codegrepper.com
how to add new li to ul onclick with javascript	stackoverflow
JavaScript HTML DOM Elements (Nodes)	w3schools.com
How do I create a link using javascript?	stackoverflow
HTML DOM Document getElementsByClassName()	w3schools.com/

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !