Как добавить столбец js

Чтобы добавить новый столбец в html-таблицу можно использовать ряд методов и свойств, таких как: createElement('td'), append(), insertAdjacent(), innerHTML, insertCell(i). Ключевая идея заключается в том, чтобы для каждой из строк таблицы добавить новый элемент (ячейку).

Исходные данные:

const tableElem = document.querySelector('#myTable');
const rows = [...tableElem.rows];

Вот простой пример, как можно добавить новую колонку справа. С помощью innerHTML свойства добавляем ячейку с нужным содержанием.

rows.forEach(row => {
  row.innerHTML += '<td>...</td>';
});

Такой же результат можно получить, если создать элемент td используя document.createElement('td') и явным добавлением узла в конец строки:

rows.forEach(row => {
  const td = document.createElement('td');
  td.innerHTML = '...';
  row.append(td);
});

Чтобы создать новый столбец на определенной позиции (номер столбца), можно использовать insertCell(i), где i будет соответствовать его порядковому индексу. Отрицательный индекс i равный -1 будет означать крайний правый столбец.

rows.forEach(row => {
  const cell = row.insertCell(0);
  cell.innerHTML = '...';
});