Как обновить таблицу на новую с другими параметрами?

Question

[Danoneko]

Вот задача: В поле c id=columns вводиться кол-во столбцов. Далее в div c id=elem строится таблица 2 на вводимое N.
Собственно вопрос: Как сделать так, чтобы при повторном изменении N, старая таблица заменялась на новую?
Вот код:

function addTable(){
	var columns = document.myform.columns.value;
	var content = '<table id="tab">';
	for(var i = 0; i < 2; i++){
		content += '<tr>';
		for(var j = 0; j < columns; j++){
			content += '<td class="tabla">' + (i+1) + '.' + (j+1) + '</td>';
		}
    	content += '</tr>';
	}
	content += '</table>';
	$('#elem').append(content);
	firstTable = content;
	if(firstTable == null){
		return document.getElementById('#elem').appendChild(table);
	}else{
		var newTable = document.getElementById('#elem').appendChild(table);
		return document.getElementById('#elem').replaceChild(newTable, firstTable);
	}
}

Кажется, что код уже готовый, но вот эта неправильная проверка на пустоту таблицы в конце: если таблицы нет, создать, иначе заменить.
Что нужно изменить в этом фрагменте?

firstTable = content;
	if(firstTable == null){
		return document.getElementById('#elem').appendChild(table);
	}else{
		var newTable = document.getElementById('#elem').appendChild(table);
		return document.getElementById('#elem').replaceChild(newTable, firstTable);
	}

Answer 1

[0xD34F]

Вместо добавления в #elem нового контента следует полностью перезаписывать его содержимое:

document.querySelector('#elem').innerHTML = `
  <table>${Array.from({ length: 2 }, (_, iRow) => `
    <tr>${Array.from({ length: columns }, (_, iCol) => `
      <td>${iRow + 1}.${iCol + 1}</td>`).join('')}
    </tr>`).join('')}
  </table>
`;

Или, можно заранее создать таблицу с пустыми строками:

const table = document.createElement('table');
table.insertRow();
table.insertRow();
document.querySelector('#elem').append(table);

И добавлять недостающее или удалять лишнее:

for (const n of table.rows) {
  while (n.cells.length < columns) {
    n.insertCell().textContent = `${-~n.rowIndex}.${n.cells.length}`;
  }

  while (n.cells.length > columns) {
    n.lastElementChild.remove();
  }
}

Comments

[Danoneko]

Если честно, еще более непонятно стало:)))

[0xD34F]

Добавил ссылки на песочницы. Смотрите, думайте.

Answer 2

[Danoneko]

Сама ответила на свой вопрос. Вдруг кому-то понадобиться выкладываю. Ответ очень прост.
Перед тем, как создать какую-либо таблицу надо перед ее созданием удалить предыдущую (Даже если ее не было).

$("#tab").remove();

А тот фрагмент кода в конце, который меня так смущал и вовсе не нужен;)