How to append a new li to ul using javascript ?

Published: April 08, 2022

Updated: December 09, 2022

Tags: Javascript; HTML; DOM;

DMCA.com Protection Status

Examples of how to append a new li to ul using javascript:

Create a simple HTML page

Let's consider the following html page:

<!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>

The goal is to append 'item-4' to the ul with the id = "mylist" using javascript

Append li to ul using javascript

To do that, a solution is to select the ul element:

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

then create a new li element

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

and create a text for example

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

Attach the text to tje li element:

li.appendChild(text);

and finally append the li element to the ul elment:

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>

Another example with a link instead of text inside the li element:

<!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>

Using innerHTML

Another solution using innerHTML to append a new 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>

It is also possible to overwrite the ul entirely:

<!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>