Какой правильный способ создания div с таблицей в нем с изображениями в таблице?

Question

Я хочу это:

<div id="display">
  <div id="slideshow1">
     <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle">
       <img ... />
     </td></tr></table>  
  </div> 
</div>

И я использую это:

var thelistt = localStorage.getItem('thelist')
   var trt = document.createElement("div");
    trt.setAttribute("Id","slideshow1");
    trt.className="pics";  

    $('#display').append(trt);  

var tble = document.createElement("table");
    tble.setAttribute("cellspacing","0");
    tble.innerHTML = "<tr><td style='height:200px;padding:0;vertical-align:middle'>";
    $('#slideshow1').append(tble);
    trt.innerHTML += thelistt;

Это создает div, затем таблицу, закрывает таблицу, затем изображения, затем закрываетdiv ..

Нет ли более плавного способа не делать всего этого, если бы кто-нибудь взглянул на мой текущий код, я уверен, вы бы посмеялись:

http://hem.bredband.net/noor/bildspelet3.html

(необходимо нажать на правку и ввести два или более URL-адресов непосредственно к изображениям)

Answer 1

Этот код:

var $display = jQuery('<div>').attr('id', 'display');
var $slideshow1 = jQuery('<div>').attr('id','slideshow1');
var $td = jQuery('<td>').attr('style','height:200px;padding:0;vertical-align:middle');

var $tr = jQuery('<tr>');
var $table = jQuery('<table>').attr('cellspacing', '0').append($tr.append($td));

jQuery('body').append($display.append($slideshow1.append($table)));

создаст этот HTML:

<div id="display">
  <div id="slideshow1">
    <table cellspacing="0">
      <tbody>
        <tr>
          <td style="height: 200px; padding: 0pt; vertical-align: middle;">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Для добавления изображения вы можете использовать похожий шаблон.

Есть более эффективные способы, которыми это можно структурировать, вероятно, в одно утверждение, но я собирался сделать это для ясности:)

НТН