Невозможно добавить содержимое строки в html ячейку таблицы с JavaScript

Question

Мне нужно добавить html содержимое в ячейку таблицы html с jQuery с помощью метода добавления. Это мой код,

   $('.add_client').click(function(){
        var table = document.getElementById("client_table");
        var row = table.insertRow(5);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var content = "<strong>Hello</strong>";
        cell1.append( content );
        cell2.append( content );
    });

Но добавленный контент выглядит как <strong>Hello</strong> вместо просто Hello . Будет здорово, если кто-нибудь сможет мне помочь в этом.

Answer 1

Вы используете jQuery append на узле DOM. Вам нужно обернуть ячейку в $ ()

$(cell1).append(content);

Но так как у вас есть jQuery, используйте его - например, как

$('.add_client').click(function() {
  let $row = $("<tr/>")
  let content = "<strong>Hello</strong>";
  $row.append($("<td/>").append(content))
  $row.append($("<td/>").append(content))
  $("#client_table > tbody > tr").eq(4).after($row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_client" type="button">Click</button>
<table id="client_table">
  <tbody>
    <tr>
      <td>0</td>
      <td>Row 0</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Row 5</td>
    </tr>
  </tbody>
</table>

Answer 2

Вы используете javascript метод добавления, а не jquery, если хотите использовать jquery метод добавления, используйте его, как показано ниже $(cell2).append( content )

$('.add_client').click(function(){
        var table = document.getElementById("client_table");
        var row = table.insertRow(5);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var content = "<strong>Hello</strong>";
        $(cell1).append( content );
        $(cell2).append( content );
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_client">Add</button>

<table id="client_table">
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
    <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
    <tr>
    <td>A3</td>
    <td>B3</td>
  </tr>
    <tr>
    <td>A4</td>
    <td>B4</td>
  </tr>
    <tr>
    <td>A5</td>
    <td>B5</td>
  </tr>
    <tr>
    <td>A6</td>
    <td>B5</td>
  </tr>
</table>

Answer 3

Проблема в вашем случае index. Если индекс равен -1 или равен количеству строк, строка добавляется как последняя строка. Если индекс больше числа строк, возникнет исключение IndexSizeError. Если индекс не указан, по умолчанию используется -1. о insertRow

$('.add_client').click(function(){
        var table = document.getElementById("client_table");
        var row = table.insertRow();
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var content = "<strong>Hello</strong>";
        cell1.append( content );
        cell2.append( content );
    });

 td {
  border: 2px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="button" value="add more" class="add_client"/>
<table id="client_table">
 
</table>

Answer 4

Вы можете использовать insertAdjacentHTML для добавления текста как html

cell1.insertAdjacentHTML('beforeend', content);
cell2.insertAdjacentHTML('beforeend', content);