Проблема с JQuery .append

Question

в html у меня есть пустой тег таблицы.

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

в функции jscript, я добавляю несколько начальных строк в таблицу, одна из которых содержит другую таблицу.

$('#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;
}

Когда этот код выполняется .... вместо просмотра

Row1 Row2 Row3

мы видим

Row1 Row3 Row2

Строка 3 помещается во внутренний стол.Не та таблица, которую я указал по id .... как я могу это исправить ??

---

Редактировать:

Я не уверен, что на самом деле причина этого, но янашел работу около.

<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/

Answer 1

Попробуйте это вместо добавления.

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

Этот ответ также содержит гораздо больше информации об этом.

Обновленная скрипка .

Answer 2

Уходя из обсуждения в комментариях, я думаю, $.html просто не нравится, когда вы передаете его в искаженном HTML.Несмотря на это, вот обновленный jsFiddle , и я просто использовал $.append и немного очистил пробелы.Надеюсь это поможет.Ради потомков, вот соответствующий код JS:

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