Dynamically manipulating the DOM with jQuery

Question

The system I am currently working requires a lot of AJAX and DOM manipulation, so I started learning (not long ago), jQuery.

In the Feature I am currently developing, there is a jQuery plugin called multi-select, which aims to select some destinations to later save them.

The flow is as follows:

1. User selects options within my "multi-select";
2. Then press the button "Filter";
3. So, some components are added in the DOM within a div with id="divId".

Below an image that may help illustrate the problem:

So far what I’ve actually managed to do is add the components via jQuery, as shown below:

$('#show-destination').click(function () {

   $('#divId').prepend('<h5 id="destination-title">Nova York <a href="#" class="btn btn-danger pull-right btn-fechar"><span class="entypo-cancel-squared"></span></a></h5>');

   $('#destination-title').after('<div id="div-departure" class="box03"></div>');
   $('#div-departure').append('<div id="div-input-departure" class="input-group "></div');
   $('#div-input-departure').append('<span id="span-departure" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
   $('#span-departure').after('<input id="input-departure" type="text" class="form-control" id="data4" placeholder="Data de Ida">');

   $('#div-departure').after('<div id="div-arrive" class="box03"></div>');
   $('#div-arrive').append('<div id="div-input-arrive" class="input-group "></div');
   $('#div-input-arrive').append('<span id="span-arrive" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
   $('#span-arrive').after('<input id="input-arrive" type="text" class="form-control" id="data4" placeholder="Data de Volta">');

});

The problem is actually to add such components via jQuery dynamically. I mean, when the user selects the destinations in the plugin and clicks "Filter" it should popular the "Div" on the side with the name of the destinations and perform an AJAX call to later popular a list.

---

EDITION

When I select some record in my multi-select component the rendered html is:

<div class="ms-selection">
   <ul class="ms-list" tabindex="-1">
      <li class="ms-elem-selection" id="49-selection" style="display: none;"><span>Roma</span></li>
      <li class="ms-elem-selection ms-selected" id="50-selection" style=""><span>Paris</span></li>
   </ul>
</div>

How can we repair the ms-selected at destination paris was selected.

The point is that I want to get all these selected records and add elements in the DOM (including these names).

Kind of like this:

   // pesquisa de todos os elementos ‘div’ na página 
   $('div.ms-selection > ul').each(function (i) {
       //Obtenho todos os registros e trabaho com eles
   });

Answer 1

Within the <ul>, the <li> are differentiated by the class ms-selected, and the function hasClass() will determine this. Here, I’m making a loop with:

$('.ms-selection ul.ms-list li').each(function() {});

And checking if the li has the class "selected", from there, popular the #divId.

$('#show-destination').click(function() {
  $('.ms-selection ul.ms-list li').each(function() {
    if ($(this).hasClass('ms-selected')) {
      $('#divId').prepend('<h5>' + $(this).text() + '</h5>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-selection">
  <ul class="ms-list" tabindex="-1">
    <li class="ms-elem-selection" id="49-selection" style="display: none;"><span>Roma</span>
    </li>
    <li class="ms-elem-selection ms-selected" id="50-selection" style=""><span>Paris</span>
    </li>
    <li class="ms-elem-selection ms-selected" id="51-selection" style=""><span>Madrid</span>
    </li>
  </ul>
</div>
<br />
<div id="divId">Items selecionados</div>
<br />
<button id="show-destination">show</button>