CODEWITHSUNDEEP
jquery
JADE
JADE

Reputation: 523

How to append to an existing list using Jquery

I am modifying an existing application where there is already a list on the html. I will be adding a fancybox where the user can select from checkboxes inside the fancybox and when closing the fancybox the selection will be appended to the loaded form. Here is the html of the list and I want to add the selected items to it.

    <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>

interface looks like: enter image description here

Upvotes: 0

Views: 85

Answers (2)

Suchit kumar
Suchit kumar

Reputation: 11859

Try using append:

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);
<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>

Upvotes: 1

Justice
Justice

Reputation: 282

Call this when the box is selected:

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

Upvotes: 1

Related Questions