Как создавать динамически HTML код и вставлять на страницу?

Question

Как создавать динамически HTML код и вставлять на страницу с учетом вложенности и переменных JS? В итоге вот такой код должен бы получиться:

<table class="table">
 <thead>
  <tr>
   <th> Наименование </th>
   <th> Колличество </th>
   <th> Цена за ед. </th>
   <th> Сумма </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td> Клей </td>
   <td> 22 </td>
   <td> 100 </td>
   <td> 2200 </td>
  </tr>
</tbody>
</table>

Что я смог сделать:

    let naumenovanie = "Клей";
  let coll = 22;
  let price = 100;
  let itogo = 2200;
  let tr = document.createElement('tr');
    let td = document.createElement('td');
    let tbody = document.querySelector('tbody');
  
    tbody.appendChild(tr);
    tr.appendChild(th);

<table class="table">
 <thead>
  <tr>
   <th> Наименование </th>
   <th> Колличество </th>
   <th> Цена за ед. </th>
   <th> Сумма </th>
  </tr>
 </thead>
 <tbody>

</tbody>
</table>

Но как сделать вложенность и вставить все значения не могу понять.

Answer 1

let naumenovanie = "Клей";
let coll = 22;
let price = 100;
let itogo = 2200;

let tr = document.createElement('tr');

let tdName = document.createElement('td');
tdName.textContent = naumenovanie;
let tdCol = document.createElement('td');
tdCol.textContent = coll;
let tdPrice = document.createElement('td');
tdPrice.textContent = price;
let tdSumm = document.createElement('td');
tdSumm = itogo;

tr.append(tdName);
tr.append(tdCol);
tr.append(tdPrice);
tr.append(tdSumm);

let tbody = document.querySelector('tbody');
tbody.appendChild(tr);

<table class="table">
  <thead>
    <tr>
      <th> Наименование </th>
      <th> Колличество </th>
      <th> Цена за ед. </th>
      <th> Сумма </th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

Для множества строк - надо будет применять цикл, а данные брать из массива

БЛОГ НА HUSL

Как создавать динамически HTML код и вставлять на страницу?

Ответы (1 шт):