Как обернуть тег HTML вокруг тега изображения?

Question

Я хочу преобразовать тег HTML ниже изображения

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

к следующему коду, используя 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. Добавить всю таблицу без изображения к документу.
2. Найдите div с классом 'image-frame' и поместите в него изображение.

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

Это не совсем ответ, но вас может заинтересовать jQuery-ImageFrame .

Answer 4

Вы должны быть в состоянии сделать что-то вроде этого:

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

но потребуется сначала распечатать таблицу, а затем вставить изображение в таблицу