Question

I have used some AJAX to output HTML to a div.

I thought the AJAX would let me display a table, but since it outputs to a div, turns out, it does not. <td> codes etc. are ignored. I know that table-less display is considered better, anyway, however I am very weak in CSS.

Can anyone suggest how to display the following simple output without tables. I mainly need to make columns line up when text is different length.

HTML

<div id="displayhere"></div>

Output I would like to go into div except not sure how to put table in div:

<tr><td colspan=2>Heading</td></tr>
<tr><td>Short text option 1</td><td><input type="checkbox"></td></tr>
<tr><td>Really long text Option 2</td><td input type="checkbox"></td></tr>

Answer 1

All you need to do, in simplified form is:

var output = '<tr><td colspan=2>Heading</td></tr><tr><td>Short text option 1</td><td><input type="checkbox"></td></tr><tr><td>Really long text Option 2</td><td><input type="checkbox"></td></tr>',
    table = $('<table />').appendTo('#displayhere'),
    tbody = $('<tbody />').html(output).appendTo(table);

JS Bin demo.