title: Populate html list using jquery and array
body: <p>I have this product list that I'm trying to populate using jQuery.</p>
  
  <p>Since doing it solely on HTML, it'll take a lot of work and a very, very long line of codes for each item. Here's my sample HTML code.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="acs-detail"&gt;
        &lt;legend&gt;Side Visor&lt;/legend&gt;
        &lt;img src="img/side_visor.jpg" class="veh-content img-responsive" /&gt;
        &lt;div class="pna-description col-md-12"&gt;
          &lt;ul&gt;
            &lt;li&gt;Keeps the rain out and fresh air in with these durable side visors.&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="pna-price col-sm-6 col-md-12"&gt;
          &lt;div class="text-deco"&gt;
            &lt;span&gt;P 700 &lt;a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."&gt;&lt;sup&gt;[*]&lt;/sup&gt;&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="border"&gt;
            &lt;span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  
  
  <p>What I need to populate is:</p>
  
  <ul>
  <li><code>&lt;legend&gt;</code></li>
  <li><code>&lt;img src= ""&gt;</code></li>
  <li><code>.pna-description ul li</code></li>
  <li><code>span</code></li>
  </ul>