CODEWITHSUNDEEP
javascriptjquery
MattBH
MattBH

Reputation: 1642

jQuery append() not working in IE

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.

Upvotes: 3

Views: 21893

Answers (5)

zatatatata
zatatatata

Reputation: 4821

Could it be that you have multiple elements with the same id "table"?

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117334

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

Upvotes: 3

Alex Pliutau
Alex Pliutau

Reputation: 21957

Your HTML in table variable is invalid. Try to make $('#table').append('<div>a</div>');. It works in IE. Make your HTAMl valid.

Upvotes: 1

Vivek
Vivek

Reputation: 11028

you don't need to make div as a jquery object when you are using appentTo. try fallowing 

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

or 

$('#table').append(table)

Upvotes: 0

Spycho
Spycho

Reputation: 7788

Try this:

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

It uses jQuery's html function, which makes a bit more sense in this circumstance than append. Not sure why append isn't working though

Upvotes: 0

Related Questions