Problem with JQuery .append

Question

in the html i have an empty table tag.

<table cellpadding="5" cellspacing="5" border="0" id="TableID" class='TableOne'>
</table>
<input id="btn" value="test" type="button" />

in a jscript function, i'm adding some initial rows to the table, one of which contains another table.

$('#btn').click(function() {
  var html = '';
  html += "\
    <tr>\
      <td>Row1\
        <table>\
          <tr>\
            <td></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td>Row2</td>\
    </tr>";
  $('#TableID').html(html);                   
  var newhtml = "<tr><td>Row3</td></tr>";
  $('#TableID').append(newhtml);
});

...

.tableOne
{
  border: 3px solid black;    
}
.tableTwo
{
  border: 2px solid red;
}

When this code is executed.... instead of seeing

Row1 Row2 Row3

we see

Row1 Row3 Row2

Row 3 is being put within the inner table. Not the table I specified by id.... how can i fix this??

Edit:

I'm not sure what the cause of this actually is, but I found a work around.

<table cellpadding="5" cellspacing="5" border="0" class='tableOne'>
  <tbody id="TableID"></tbody>
</table>
<input id="btn" value="test" type="button" />

...

$('#btn').click(function() {
  var html = '';
  html += "\
    <tr>\
      <td>Row1\
        <table>\
          <tr>\
            <td></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td>Row2</td>\
    </tr>";
  $('#TableID').html(html);                   
  var newhtml = "<tr><td>Row3</td></tr>";
  $('#TableID').append(newhtml);
});

..

http://jsfiddle.net/sjord010/U88fa/3/

Whipped this up in jsFiddle: jsfiddle.net/JimmySawczuk/bPwMg, is the same problem occurring here? From what I can see, this is expected behavior. — Jimmy Sawczuk
– Jimmy Sawczuk, Commented Apr 26, 2011 at 22:50
Yes, I did close my initial table tag. My code is actually alot more complex than that, that was a very simplified version. Never seen jsFiddle before, good tool. But that is what should be happening... not's what is happening in my actual code. I'll see what i can do to post some of the actual code here — Steph
– Steph, Commented Apr 26, 2011 at 22:53
I've added quite a bit of the actual code. If there's something missing, let me know. — Steph
– Steph, Commented Apr 26, 2011 at 23:05
It seems like the only difference between my jsFiddle and your abbreviated example, then, is that I'm using two $.appends instead of one $.append and one $.html. Can you apply that to your actual case? — Jimmy Sawczuk
– Jimmy Sawczuk, Commented Apr 26, 2011 at 23:39

Jimmy Sawczuk · Accepted Answer · 2011-04-27 01:11:17Z

1

Going off of the discussion in the comments, I think $.html just doesn't like when you pass it in malformed HTML. Regardless, here's an updated jsFiddle, and I just used $.append and cleaned up the whitespace a bit. Hope this helps. For posterity's sake, here's the relevant JS code:

var html = '';
html += "<tr><td><table class='tableTwo'><tr><td>Row1</td></tr></table></td></tr>";

html += "<tr><td><table class='tableTwo'><tr><td>Row2</td></tr></table></td></tr>";

$('#TableID').append(html);
newhtml = "<tr><td>Row3</td></tr>";
$('#TableID').append(newhtml);

answered Apr 27, 2011 at 1:11

Jimmy Sawczuk

13.7k7 gold badges48 silver badges60 bronze badges

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

1 Comment

Steph Over a year ago

Ah! I see! Good to know for future reference. Thanks!

Community · Accepted Answer · 2017-05-23 11:47:42Z

1

Try this out instead of append.

$('#TableID > tr:last').after(newhtml);

This answer has a lot more information about this as well.

Updated fiddle.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Apr 27, 2011 at 1:15

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

1 Comment

Steph Over a year ago

This wont' work for me considering the last tr is technically the one that is contained within an inner table, so really it would cause the same issue. I actually tried this.

Collectives™ on Stack Overflow

Problem with JQuery .append

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related