What's the proper workaround for creating a div with a table in it with images in the table?

Question

I want this:

<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>

And I'm using this:

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;

This creates a div, then a table, closes the table, then images, then closes div..

Isn't there a smoother way to not do all this, if someone'd take a look at my current code i''m sure you'd get a good laugh :

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

(you need to click on edit and put in two or more urls directly to images)

Answer 1

If I understand your question right. That's the smoother way of getting what you want:

var c = document.getElementById('display');
c.innerHTML = '  <div id="slideshow1">';
c.innerHTML = '     <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle">';
c.innerHTML = '       <img ... />';
c.innerHTML = '     </td></tr></table>  ';
c.innerHTML = '  </div> ';

Answer 2

This code:

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)));

Will create this 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>

To add an image you can use a similar pattern.

There are more efficent ways this could be structured, probably into one statement, but i was going for clarity :)

HTH