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 = "
" — minikomi, Jun 30 '11 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, Jun 30 '11 at 12:25

score 3 · Accepted Answer · edited May 23 '17 at 12:31

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 '17 at 12:31

Community

1
1

answered Jun 30 '11 at 12:32

Dr.Molle

116,463
16
195
201

Is there a way to show us your site? Do other jQuery-script work on your site? – Dr.Molle Jun 30 '11 at 12:38
There's no way, other scripts are working fine, and it's only in IE that it's not working – MattBH Jun 30 '11 at 12:40
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 Jun 30 '11 at 12:44
Didn't know that here are PMs available. But if they are, yes you can. – Dr.Molle Jun 30 '11 at 13:00
@Dr.Molle let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1011/discussion-between-mattbh-and-dr-molle) – MattBH Jun 30 '11 at 13:04
Thanks Dr. Molle for your help!! Solution: extra
tag at the end of the table needed to be removed
– MattBH Jun 30 '11 at 13:50

score 1 · Answer 2 · answered Jun 30 '11 at 12:10

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 '11 at 12:10

Alex Pliutau

21,392
27
113
143

2

Specifically, the row of `` tags is lacking surrounding `` tags. – Pointy Jun 30 '11 at 12:26
@MattBH, TH is a CELL, not a row. Try to remove your's THs for the test. – Alex Pliutau Jun 30 '11 at 13:14

score 0 · Answer 3 · answered Jun 30 '11 at 12:07

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 '11 at 12:07

Spycho

7,698
3
34
55

Internally, pretty much exactly the same thing will happen anyway. – Pointy Jun 30 '11 at 12:10
@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. – Spycho Jun 30 '11 at 12:36
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); – JSON Sep 07 '17 at 16:05
@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. – Spycho Sep 19 '17 at 10:49

score 0 · Answer 4 · answered Jun 30 '11 at 12:09

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 '11 at 12:09

Vivek

10,978
14
48
66

score 0 · Answer 5 · answered Jun 30 '11 at 12:34

0

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

answered Jun 30 '11 at 12:34

zatatatata

4,761
1
20
41

Nope tried changing the div's id to tabledata and still no luck. – MattBH Jun 30 '11 at 12:36
@MattBH Have you checked the source after appending (with the developer tool). Perhaps it just doesn't get rendered for some reason. – zatatatata Jun 30 '11 at 12:49
i have i've checked the source code and used an alert `alert($('#tabledata').html());` which returned blank – MattBH Jun 30 '11 at 12:51
@MattBH try appending something else. For example do `$('#tabledata').append('
foo
'); alert($('#tabledata').html());` and check if that works. If it does I have no idea anymore. – zatatatata Jun 30 '11 at 13:05
Using iframes? If so, you cannot use pure $ to find something inside the iframe. Also try logging `$('#tabledata')`, `$(table)` etc – zatatatata Jun 30 '11 at 13:13

jQuery append() not working in IE

5 Answers5