Question

I’m trying to append the following table built up in a string to a div on my page using this:

var table = 
'<table data-custom="3963770" id="table" cellpadding="3" cellspacing="5" 
        valign="top" width="995px" border="3" bordercolor="#83725B">

        <th height="50" colspan="2">Company Name</th>
        <th height="50" colspan="3">Esco Number</th>
        <th height="50" colspan="1">Province</th>
        <th height="50">Sector</th>
        <th height="50">Technology</th>
        <th height="50" colspan="2">Status</th>
      <tr>
        <td colspan="2">3H Envirostrategies cc</td>
        <td colspan="3">11059420</td>
        <td>Gauteng, KZN, Western Cape, Mpumalanga, Free State, 
            Eastern Cape</td>
        <td>
          <select id="mainSectors0">
            <option>Commercial</option>
          </select>
        </td>
        <td>
          <select id="mainTechs0">
            <option>Project Management</option>
          </select>
        </td>
        <td colspan="2">Active</td>
      </tr>
      <tr>
        <td style="border: none;" colspan="5">
          <div data-custom="contact_info" style="display:inline;"><u>Contact information</u></div>
        </td>
      </tr>
      <tbody data-custom="place_holder">
      </tbody>
    </table>';

I have a div tag with:

<div id="table"></div>

I then try to use this to add the table to the div:

$(table).appendTo($('#table'));

// I've tried $("#table").append(table); but no luck.

It works fine in every other browser except IE 6+. Does anybody know of a workaround, or if i’m doing something wrong?

Thanks in advance.

Answer 1

Your code works for me, also on IE : http://jsfiddle.net/doktormolle/N5z5T/

Are you sure that you use the var-keyword before table = '<table>....</table';

If not, this may break IE, see this related topic: jQuery selector does not work in IE7/8