Как использовать метод JQuery .append (), чтобы добавить строку, содержащую HTML?

Question

Я создал html-страницу с формой поиска и хочу показывать таблицу с некоторыми данными, когда пользователь нажимает кнопку «Поиск».

Я хочу использовать JQuery для отображения таких данных вместо вставки статического HTML <tr>. Я хочу использовать метод .append(), чтобы добавить строку, содержащую <td> с данными.

Итак, я сделал следующее:

Я скопировал код начальной загрузки для таблицы и опустошил <tbody>, поэтому в таблице не будет показано ни одной строки, если результаты не будут возвращены.

Я дал идентификатор для <tbody>

Это HTML-код:

<table id="tabella" class="table hide">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Indirizzo</th>
    </tr>
  </thead>
  <tbody id="tbody">
<!-- 

    <tr>
      <th scope="row">1</th>
      <td>Maria</td>
      <td>Ottone</td>
    </tr>


    <tr>
      <th scope="row">2</th>
      <td>Giacomo</td>
      <td>Troisi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lorenza</td>
      <td>Pieri</td>
    </tr>

 <-->

  </tbody>
</table>

Теперь мне нужно добавить первую <tr> таблицы (ранее удаленную) к <tbody> с помощью метода JQuery .append(), как если бы это была строка, выбрав идентификатор <tbody>.

function validateNome(){
  console.log('function validateNome has been activated');

  if ($("#inlineFormInputNome").val()=="") {
      $("#errorLog").show();    
  } else {          
    $("#errorLog").hide();    
    $("#cercaNome").prop("disabled", true);     
    setTimeout(function (){              
      $("#tabella").show();    

// Что я должен написать в скобках в следующей строке?

      $("#tbody").append("        ");

       $("#cercaNome").prop("disabled", false);    
    } , 2000);
  }
}

То есть: возможно ли объединить метод append() с методом html() в JQuery? Или же: Как я могу использовать метод JQuery .append() для добавления строки, содержащей код html?

Answer 1

Вы можете попробовать что-то вроде этого:

 $("#tabella tbody").append('<tr><th scope="row">2</th><td>Giacomo</td><td>Troisi</td>/tr>');

Он будет добавлен <tr> после последнего <tr>, который находится в таблице.