CODEWITHSUNDEEP
javascriptjqueryhtmlappend
Steph
Steph

Reputation: 409

Problem with JQuery .append

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/

Upvotes: 0

Views: 7890

Answers (2)

Mark Coleman
Mark Coleman

Reputation: 40863

Try this out instead of append. 

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

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

Updated fiddle.

Upvotes: 1

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

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);

Upvotes: 1

Related Questions