Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
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=
    </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:



Last Updated : 14 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads