title: dynamic carousel slider jquery .append
body: <p>i have to construct a dynamic carousel with jquery ajax and my boss suggest me to use .append() method.
  This is my carousel html code:</p>
  
  <pre><code>&lt;div id="myCarousel"&gt;
  
              &lt;/div&gt;
              &lt;div class="container-fluid" id="slider"&gt;
              &lt;div id="pb_2"&gt;
              &lt;div id="carousel_2" class="carousel slide" data-ride="carousel"&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
  
                  &lt;!--img slider del progetto--&gt;
                          &lt;div class="item"&gt;
                                  &lt;img src="images/img01.jpg" alt="image description" width="95%" height="349" /&gt;
  
                              &lt;div class="carousel-caption"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item active"&gt;
  
                                      &lt;img src="images/img24.jpg" alt="image description" width="95%" height="349" /&gt;
  
                              &lt;div class="carousel-caption"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
  
                                  &lt;img src="images/img23.jpg" alt="image description" width="95%" height="349" /&gt;
  
                              &lt;div class="carousel-caption"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
  
                                  &lt;img src="images/img17.jpg" alt="image description" width="95%" height="349" /&gt;
  
                              &lt;div class="carousel-caption"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
  
                                  &lt;img src="images/img15.jpg" alt="image description" width="95%" height="349" /&gt;
  
                              &lt;div class="carousel-caption"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                  &lt;!--fine img slider del progetto--&gt;
  
  
                  &lt;/div&gt;
  
                  &lt;!-- Controls --&gt;
                      &lt;a class="left carousel-control" href="#carousel_2" role="button" data-slide="prev"&gt;
                          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                          &lt;span class="sr-only"&gt;Precedente&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class="right carousel-control" href="#carousel_2" role="button" data-slide="next"&gt;
                          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                          &lt;span class="sr-only"&gt;Prossimo&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  
               &lt;/div&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>and my jquery ajax:</p>
  
  <pre><code>$(document).ready(function () {
      $.get("myImagesURL")
      .done(function (response) {
        $(response.DataObject).each(function (i, item) {
            $('#myCarousel').append($('&lt;div class="item"&gt;&lt;img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="349" /&gt;&lt;div class="carousel-caption"&gt;&lt;/div&gt;&lt;/div&gt;'));
        });
      })
    .fail(function () {
        alert("error");
    })
    .always(function () {
        alert("complete");
    });
  
  });
  </code></pre>
  
  <p>all images are loaded but the carousel is not... how can i implement this carousel with Jquery? I'm new in programming...</p>
  
  <p>Thanks in advance!</p>