jQuery append() not working in IE

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.

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
– minikomi, Commented Jun 30, 2011 at 12:06
@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
– MattBH, Commented Jun 30, 2011 at 12:25

Community · Accepted Answer · 2017-05-23 12:31:17Z

3

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 30, 2011 at 12:32

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dr.Molle Over a year ago

Is there a way to show us your site? Do other jQuery-script work on your site?

MattBH Over a year ago

There's no way, other scripts are working fine, and it's only in IE that it's not working

Dr.Molle Over a year ago

So I'm afraid we need more code(maybe everything) or a fiddle, the error is not caused by the code you've posted.

Dr.Molle Over a year ago

Didn't know that here are PMs available. But if they are, yes you can.

MattBH Over a year ago

@Dr.Molle let us continue this discussion in chat

|

Alex Pliutau · Accepted Answer · 2011-06-30 12:10:06Z

1

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

answered Jun 30, 2011 at 12:10

Alex Pliutau

22k28 gold badges115 silver badges144 bronze badges

2 Comments

Pointy Over a year ago

Specifically, the row of <th> tags is lacking surrounding <tr> tags.

Alex Pliutau Over a year ago

@MattBH, TH is a CELL, not a row. Try to remove your's THs for the test.

Spycho · Accepted Answer · 2011-06-30 12:07:49Z

0

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

answered Jun 30, 2011 at 12:07

Spycho

7,7983 gold badges36 silver badges55 bronze badges

4 Comments

Pointy Over a year ago

Internally, pretty much exactly the same thing will happen anyway.

Spycho Over a year ago

@Pointy: Yeah... there's no reason I can think of that this would work over appendTo, but then again, there's no reason I can think of that appendTo wouldn't work. I thought it might be worth ruling out appendTo itself being the problem, which we now have.

JSON Over a year ago

Append will add the element to the existing parent. This will replace the entire html inside the parent overriding what is currently in there. Not the same. You could do $('#table').html($('#table').html() + table);

Spycho Over a year ago

@JSON - I'm aware that append appends and html replaces, however from the OP's question, it appears like this is what he is actually trying to do.

Vivek · Accepted Answer · 2011-06-30 12:09:50Z

0

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)

answered Jun 30, 2011 at 12:09

Vivek

11k15 gold badges51 silver badges68 bronze badges

Comments

zatatatata · Accepted Answer · 2011-06-30 12:34:20Z

0

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

answered Jun 30, 2011 at 12:34

zatatatata

4,8212 gold badges22 silver badges42 bronze badges

5 Comments

MattBH Over a year ago

Nope tried changing the div's id to tabledata and still no luck.

zatatatata Over a year ago

@MattBH Have you checked the source after appending (with the developer tool). Perhaps it just doesn't get rendered for some reason.

MattBH Over a year ago

i have i've checked the source code and used an alert alert($('#tabledata').html()); which returned blank

zatatatata Over a year ago

@MattBH try appending something else. For example do $('#tabledata').append('<div>foo</div>'); alert($('#tabledata').html()); and check if that works. If it does I have no idea anymore.

zatatatata Over a year ago

Using iframes? If so, you cannot use pure $ to find something inside the iframe. Also try logging $('#tabledata'), $(table) etc

Collectives™ on Stack Overflow

jQuery append() not working in IE

5 Answers 5

6 Comments

2 Comments

4 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

2 Comments

4 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related