JS добавление элемента к родительскому не работает

Я пытаюсь добавить новую строку в таблицу, но я не могу добавить новую строку в таблицу. Если я консольный журнал элементы индивидуально я получаю ожидаемый ответ может ли кто-нибудь помочь мне найти решение проблемы, ниже приведен код

Html

<tbody id="tableProduct">
{%for product in products %}
              <tr>
                  <td scope="row" class="rowCounter"></td>
                  <td>{{product.nameP}}</td>
                  <td>{{product.brand}}</td>
                  <td>{{product.price}}</td>
              </tr>
              {%endfor%}
          </tbody>

JS

class UI {

    //Adding the new Product to the display
    static addProduct(){
        const table = document.querySelector('#tableProduct');
        const newRow = document.createElement('tr');
        newRow.innerHtml = `
            <td scope="row" class="rowCounter"></td>
            <td>Camera</td>
            <td>Sony</td>
            <td>10000</td>
        `;

        console.log(table.firstElementChild);

        //Placing the new row into the table
        //table.insertBefore(newRow, table.firstElementChild);
        //table.insertBefore(newRow, table.firstChild);
        table.appendChild(newRow);
        console.log(newRow.innerHtml)
    }
}


document.querySelector('#productForm').addEventListener('submit', (event)=>{
    event.preventDefault();
    UI.addProduct();
})

Вернуться на верх