如何使用Jquery附加到现有列表

Question

我正在修改现有的应用程序，其中已经有一个html列表。我将添加一个fancybox，用户可以从fancybox中选中复选框，当关闭fancybox时，选择将附加到加载的表单。这是列表的html，我想将选定的项目添加到其中。

    <ul id="collabList" data-area="display-list">
     <li>
        First item in the list
        <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
        </button>
     </li>
     <li>
        Second item in the list
       <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
      </button>
      </li>
    </ul>

界面如下：

Answer 1

选中此框后调用此方法：

$('#collablist').append('<li>New List</li>');

Answer 2

尝试使用append：

＆＃13;

＆＃13;

var str='<li>Third item in the list';
str +='<button class="btn btn-link btn-sm" type="button" data-action="remove">';
           str +='<i class="glyphicon glyphicon-remove-sign"></i>';
     str +=' </button></li>';
$("ul#collabList").append(str);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="collabList" data-area="display-list">
     <li>
        First item in the list
        <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
        </button>
     </li>
     <li>
        Second item in the list
       <button class="btn btn-link btn-sm" type="button" data-action="remove">
           <i class="glyphicon glyphicon-remove-sign"></i>
      </button>
      </li>
    </ul>

＆＃13;

＆＃13;

＆＃13;