How to make HTML (divs) + jQuery code into just jQuery that generates the HTML
<p>I have some HTML on a page which I use jQuery to modify/add data to from an array. I'd like to use jQuery to generate the HTML/Divs &amp; img src if possible to stop having to manually edit each page with the amount of required divs in HTML. I don't have access to a database for this.</p>

<p>The HTML markup looks like this, which I have to copy and paste for the amount of items in the array:</p>

<pre><code>&lt;!-- START ITEM --&gt;&lt;div class="itemWrapper"&gt;&lt;a href="" class="itemLink"&gt;
&lt;!-- IMG  --&gt;&lt;img src="" class="itemImage"&gt;&lt;/a&gt;
&lt;!-- TITLE --&gt;&lt;div class="itemTitle"&gt;T&lt;/div&gt;
&lt;!-- INFO --&gt;&lt;div class="itemDesc"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;!-- END ITEM --&gt;
</code></pre>

<p>And the jQuery is on document.ready:</p>

<pre><code>var infoArray = [
      'ABC12_square','Square','Square Description Here',
      'ABC13_polygon','Polygon','Polygon Description Here',
      'ABC14_triangle','Triangle','Triangle Description Here',
    ];
      $BoP = 'tag+info+here';
    
      i0 = 0;
      i1 = 1;
      i2 = 2;
      
    $('.itemImage').each(function(index) {
      $(this).attr("src", infoArray[i0]);
      i0 = i0+3;
      var prR = $(this).attr("src");
      var subprR = jQuery.trim(prR).substring(0, 5);
      $(this).attr("src", "/images/info/"+prR+"_M.jpg");
      $(this).parent().attr("href", "/iteminfopopup.htm?codes="+prR+"&amp;BoP="+$BoP).attr('rel', 'mygroup').addClass('BoP8 fancybox.iframe');
      $(this).parent().append('&lt;img src="/images/info/'+subprR+'_H.jpg" class="itemHover" border="0" width="250" height="354"&gt;');
    });
       
    $(".itemTitle").each(function(index) {
      $(this).text(infoArray[i1]);
      i1 = i1+3;
    });
    
    $(".itemDesc").each(function(index) {
      $(this).text(infoArray[i2]);
      i2 = i2+3;
    });
    // Setup Fancybox
  $(".BoP8").fancybox({
      closeBtn    : true,
      maxWidth  : 467,
      maxHeight  : 609,
      fitToView  : false,
      padding   : '5',
      openEffect  : 'none',
      loop: false,
      closeEffect  : 'none',
      nextEffect : 'none',
      prevEffect : 'none'
  });
    // Create image hover animation
  $(".itemImage").hover(
     function() {$(this).animate({"opacity": "0"}, "fast");},
     function() {$(this).animate({"opacity": "1"}, "fast");}
   );
</code></pre>

<p>Fiddle: <a href="http://jsfiddle.net/ZuPnp/" rel="nofollow">http://jsfiddle.net/ZuPnp/</a></p>

<p>I've looked at append but it keeps going hideously wrong! </p>
