Skip to content
Related Articles

Related Articles

How to add a list elements within an unordered list element using jQuery ?
  • Last Updated : 14 Apr, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :