title: How to append a div and an image dynamically?
body: <p>I wanted to ask that is there a way by which I can append a div and an image inside it using javascript? </p>
  
  <p>So basiclly, images are stored in an array. <strong>displayAllImages</strong> function() appends the images to the div <strong>#images</strong> but I want that function should append a <strong>div</strong> and within the new div there should be the <strong>image</strong> may be as a <strong>background</strong> or an <strong>image contained in a div</strong>. This should repeat for all images as in <strong>3 images should be display as 3 divs containing 3 different images/elements of the array</strong>. Try to stick to array implementation only. Thanks!</p>
  
  <p>Jsfiddle : <a href="http://jsfiddle.net/1qk3voxq/" rel="nofollow">http://jsfiddle.net/1qk3voxq/</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var gallery= new Array();
  
      gallery[0]="http://s6.tinypic.com/1zd1a47_th.jpg";
      gallery[1]="http://s6.tinypic.com/2ngh9ty_th.jpg";
      gallery[2]="http://s6.tinypic.com/29zy5qf_th.jpg";
  
      var x= $("#images");
  
      function displayAllImages() {
          var i = 0,
              len = gallery.length;        
          for (; i &lt; gallery.length; i++) {
                
             x.append("&lt;img class='roll' src='" + gallery[i] + "'&gt;");
          } 
      };
       
      $(function() {
          displayAllImages();
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #container {
       width:600px;
       height:600px;
       background-color:#000;
       }
  
      .roll {
          margin:4px;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
      &lt;div id=images&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>