如何使用 jQuery 在无序列表元素中添加列表元素？

在本文中，我们将看到如何使用 jQuery 将列表添加到无序列表。所以我们用来追加列表中项目的函数是——

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

方法：首先，我们创建一个按钮，提供将项目添加到列表的功能。

单击按钮时，然后通过按钮 ID，我们将首先将输入从 textBox 存储到具有其值的变量内容，然后简单地将内容放入var fixContent='

’+content+'

’

之后，我们只需将内容附加到具有名为list的类的列表中。

代码实现：

HTML

  

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

  
  

     Type List to Add
    
    
    
  
    
        
  
        
    

  

输出：