title: Dynamically adding slide images inside slider
body: <p>i am trying to dynamically add images in the slider called owl slider.
  The problem is that i want to clear the divs inside the </p>
  
  <pre><code>.owl-wrapper
  </code></pre>
  
  <p>div and then add new items on a click.
  The original code is </p>
  
  <pre><code> &lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="../img/car1.jpg" alt="The Last of us"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="../img/car2.jpg" alt="The Last of us"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="../img/car3.jpg" alt="The Last of us"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="../img/car4.jpg" alt="The Last of us"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Now i did this </p>
  
  <pre><code>      $('.singleNewsItem').click(function () {
  
              $('#owl-demo').append('&lt;div class="item"&gt;&lt;img src="../img/trac1.jpg"&gt;&lt;/div&gt;');
  
              });
      });
  </code></pre>
  
  <p>Somehow its adding the image outside the main slider.
  Please help .
  thanks.</p>