javascript - jQuery append() not working in IE - Stack Overflow

admin管理员组

文章数量:1278859

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jun 30, 2011 at 12:03 MattBHMattBH 1,65233 gold badges2525 silver badges3131 bronze badges 4

• 4 Javascript is pretty touchy about multiline strings & I wouldn't rely on them being accepted across browser.. Try it with just var table = "<table></table>" – minikomi Commented Jun 30, 2011 at 12:06
• Does anything happen at all in IE? Errors? – Pointy Commented Jun 30, 2011 at 12:07
• @Pointy nothing happens in any IE browser... just blank, @minikomi I formatted it above for readability, it's all on one line in the code – MattBH Commented Jun 30, 2011 at 12:25
• Do you still want the original? – MattBH Commented Jun 30, 2011 at 12:27

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Your code works for me, also on IE : http://jsfiddle/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

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

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

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)

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

本文标签： javascriptjQuery append() not working in IEStack Overflow