title: appending html after the last image using jquery
body: <p>How do i append the following html after the last img:</p>
  
  <pre><code>//create the icon
  $('div.lookup-image-wrapper &gt; div img').append('&lt;div class="icon"&gt;&lt;/div&gt;'); 
  </code></pre>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;div class="lookup-image-wrapper" style="text-align: center"&gt;
  
          &lt;div class="divProductPic" id="divProductPic26039"&gt;
              &lt;img alt="200 D" border="0" id="ProductPic26039" name=
              "ProductPic26039" onclick="popuplarge_26039()" src=
              "images/Product/medium/26039.jpg" style=
              "cursor:hand;cursor:pointer;" title=
              "Click here to view larger image"&gt;
          &lt;/div&gt;
  
  
      &lt;img alt="Show Picture 1" border="0" class="image-nav" onclick="_(1);" src="images/PRODUCT/icon/26039_1_.jpg"
          style="cursor:hand;cursor:pointer;"&gt;
      &lt;img alt="Show Picture 2" border="0" class="image-nav" onclick="_(2);" src="images/PRODUCT/icon/26039_2_.jpg"
           style="cursor:hand;cursor:pointer;"&gt;&lt;img alt="Show Picture 3" border="0" class="image-nav" onclick="setcolorpicidx_26039(3);" src=
          "images/PRODUCT/icon/26039_3_.jpg" style="cursor:hand;cursor:pointer;"&gt;
  
              &lt;!--[#### THE DIV ICON NEEDS TO GO HERE #####]--&gt;
  
       &lt;div id="prodEmbiggen"&gt;
          &lt;a href="javascript:void(0);" onclick=""&gt;&lt;img align="absmiddle" alt="" border="0" src="showlarger.gif" title=
            "Click for larger image"&gt;&lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>