how to wrap html tag around image tag?

Question

I want to convert below html image tag

<img src="img-1.jpg" width="290" height="420" class="frameImage" />

to following code using jquery.

<table class="frame" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="border-top" colspan="3"></td>
  </tr>
  <tr>
    <td class="border-left"></td>
    <td><div class="image-frame"><img src="img-1.jpg" width="290" height="420" class="frameImage" />
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-right"></div>
        <div class="bottom-left"></div>
      </div></td>
    <td class="border-right"></td>
  </tr>
  <tr>
    <td class="border-bottom" colspan="3"></td>
  </tr>
</table>

Answer 1

1. Append the whole table without the image to the document.
2. Find div with class 'image-frame' and place the image inside it.

Answer 2

$('img[src=img-1.jpg]').before('<table class="frame" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="border-top" colspan="3"></td>
  </tr>
  <tr>
    <td class="border-left"></td>
    <td><div class="image-frame"><img src="img-1.jpg" width="290" height="420" class="frameImage" />
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-right"></div>
        <div class="bottom-left"></div>
      </div></td>
    <td class="border-right"></td>
  </tr>
  <tr>
    <td class="border-bottom" colspan="3"></td>
  </tr>
</table>').remove();

Answer 3

You should be able to do something like this:

    $('.image-frame').html('<img src="img-1.jpg" width="290" height="420" class="frameImage" /%gt;')

but it would require you to print the table first and then insert the image into the table

Answer 4

This isn't exactly an answer, but you may be interested in jQuery-ImageFrame.