title: JQuery append and Bootstrap carousel
body: <p>So I want to add custom amount of carousel items using JQuery.</p>
  
  <p>Here is the code in script.js (this is also the only thing in the file).</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      for(i = 0; i &lt; 5; i++) {
          $('.carousel-inner').append('&lt;div class="item"&gt; &lt;img src="1.jpg" alt=""&gt; &lt;/div&gt;');
      }
  });&lt;/script&gt;
  </code></pre>
  
  <p>That is how I call script in </p>
  
  <pre><code>&lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the carousel that already contains two items:</p>
  
  <pre><code>&lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
          &lt;img src="1.jpg" alt=""&gt;
          &lt;div class="carousel-caption"&gt;
          &lt;h3&gt;Item 1&lt;/h3&gt;
          &lt;p&gt;This is the first item&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;img src="5.jpg" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;Item 2&lt;/h3&gt;
                  &lt;p&gt;This is the second item&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I do not see any other items in the carousel and this does not work.</p>