How to add a list elements within an unordered list element using jQuery ?
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:
Please Login to comment...