How to add a list elements within an unordered list element using jQuery ?

Last Updated : 14 Apr, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

Here in this article, we will see that how we can add a list to the Unordered List using jQuery. So the function which we had used to append the items in the list are -

<script>
    $(document).ready(function() {
        $('.btn').click(function(){
            var content = $('#addList').val();
            var fixingContent='<li>'+content+'</li>';
            $('.List').append(fixingContent);
        })
    }) 
</script>

Approach: First, we create a button that provides the functionality to add the items to the list.

When the button is clicked then through the button ID we will be first store the input from the textBox to the variable content having it's value then simply put the content in the var fixingContent='<li><span>'+content+'</span></li>' 

After that, we just append the content to the list having a class named list.

Code Implementation:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>

    <style>
        .btn {
            width: 66px;
            height: 21px;
            margin: 5px;
            padding: 0px;
            border-color: #b6b6bb;
        }
        
        #addList {
            border-color: rgb(183, 252, 252);
        }
    </style>
    
    <script>
        $(document).ready(function() {
            $('.btn').click(function() {
                var content = $('#addList').val();
                var fixingContent = 
                    '<li>' + content + '</li>';
                    
                $('.List').append(fixingContent);
            })
        })
    </script>
</head>


<body>
    <h3 class="head"> Type List to Add</h3>
    <input type="text" id="addList">
    <input type="button" name="add" 
        class="btn" value="Add">
    </button>

    <div class="addTask">
        <ul class="List">

        </ul>
    </div>
</body>

</html>

Output:


Next Article
How to add a list elements within an unordered list element using jQuery ?
author
rohit2sahu
Improve
Article Tags :

Similar Reads