title: How to insert element into existing HTML by jQuery?
body: <p>I have HTML code snippet:</p>
  
  <pre><code>&lt;div class="main-photo" style="height: 304.875px;"&gt;
       &lt;img class="big-thumb" src="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378" style="top: -27px;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need result when mouse hover :</p>
  
  <pre><code>&lt;div class="main-photo" style="height: 304.875px;"&gt;
      &lt;a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378"&gt;
           &lt;img class="big-thumb" src="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378" style="top: -27px;"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I try something like this, use jQuery, when hover mouse over image (stub idea): </p>
  
  <pre><code>$('.main-photo').hover(function() {
      $('.main-photo ').append()..attr('class', 'fancybox fancybox.iframe');
  });
  </code></pre>
  
  <p>but not work.</p>