JQuery и добавление строки в таблицу

У меня есть следующий код jquery.

var destTable = $("#numbers");
$(document).ready(function() {
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr><td>hi</td></tr>");
   $("#numbers").append(newRow);
  });
});

Мне бы очень хотелось, чтобы хранить ссылку на элемент один раз, а затем использовать его там.

Приведенный выше код добавляет строку в мою таблицу как ожидалось, но если я использую ее. $(destTable).append(newRow) или destTable.append(newRow) ничего не происходит, может ли кто-нибудь пролить свет на это для меня?

Спасибо

Ответ 1

Сохраните ссылку внутри document.ready:

$(document).ready(function() {
  var destTable = $("#numbers");
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr><td>hi</td></tr>");
   $("#numbers").append(newRow);
  });
});

Точка document.ready должна дождаться готовности DOM; если вы попытаетесь сделать $('#numbers'); вне его (и код не появится после элемента в документе), DOM еще не создал этот элемент, поэтому вы не будете иметь правильную ссылку на него.

Как только вы сделаете это, вы сможете сделать:

destTable.append(newRow);

Внутри функции click. Однако в качестве последней заметки общепринятой практикой является предикация переменных, представляющих jQuery-множества с помощью $. Так что это лучше всего:

var $destTable = $("#numbers");

Ответ 2

Вы можете использовать appendTo следующим образом:

$("<tr><td>Hello</tr><tr>").appendTo("#MyTable > tbody")