title: Problem adding image overlay (jQuery)
body: <p>What I want to do is find all images with a particular class name, and place an overlay image over them. My script thus far in jQuery 1.2.6:</p>
  
  <pre><code>jQuery.noConflict();
  jQuery(document).ready( function($) {
    var module = $(".module-contactus div div div");
    module.find("img.let").each( function() {
      var iWidth = $(this).width();
      var iHeight = $(this).height();
      var letimg = $('&lt;img src="/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" /&gt;');
      var wrapper = $( '&lt;span style="position: relative; display: inline-block;"&gt;&lt;/span&gt;' );
      $(this).wrap( wrapper );
      letimg.appendTo( wrapper );
    });
  });
  </code></pre>
  
  <p>The <code>letimg</code> is not added to the document (according to Firebug). The <code>span</code> element successfully wraps the original image though. Also, it does kinda work if I pass <code>$(this)</code> into the <code>appendTo</code> function, but then it's added inside the original image!</p>
  
  <p><strong>EDIT:</strong> markup is below. (The extra divs are a consequence of Joomla.)</p>
  
  <pre><code>&lt;div class="module-contactus"&gt;
  &lt;div&gt;&lt;div&gt;&lt;div&gt;
  
  &lt;img src="/contact1.jpg" /&gt;
  &lt;img class="let" src="/contact2.jpg" /&gt;
  
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After the script is run the second image is replaced with:</p>
  
  <pre><code>&lt;span style="position: relative; display: inline-block;"&gt;
  &lt;img class="let" src="/contact2.jpg" /&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>However, it should end up like this:</p>
  
  <pre><code>&lt;span style="position: relative; display: inline-block;"&gt;
  &lt;img class="let" src="/contact2.jpg" /&gt;
  &lt;img src="/LET.png" style="..." /&gt;
  &lt;/span&gt;
  </code></pre>