When developers need to dynamically generate HTML tables in JavaScript, most reach for one of two approaches: tediously assembling elements via createElement() and appendChild(), or dangerously dumping HTML strings into innerHTML – a notorious vector for XSS attacks. Yet there's a third path buried in browser APIs since the early 2000s: the dedicated HTML Tables interface, offering surgical control without security compromises.

// Creating a table from nested arrays
const data = [
  ['one','two','three'],
  ['four','five','six']
];

const table = document.createElement('table');
document.body.appendChild(table);

data.forEach((rowData, rowIndex) => {
  const row = table.insertRow(rowIndex);

  rowData.forEach((cellData, cellIndex) => {
    const cell = row.insertCell(cellIndex);
    cell.textContent = cellData;
  });
});

This forgotten API treats tables as structured data rather than markup strings. Key methods like insertRow() and insertCell() enable incremental updates without rebuilding the entire table – a significant performance win for large datasets. Post-creation, you can directly access cells via intuitive indexing:

// Accessing specific cells
console.log(table.rows[1].cells[1]); // Outputs: <td>five</td>

Modification becomes equally straightforward. Appending a new row requires just:

// Adding a row dynamically
const newRow = table.insertRow(-1); // -1 appends to end
const newCell = newRow.insertCell(0);
newCell.textContent = 'foo';

Despite its elegance, the API shows its age. Quirks like using -1 for appending rows feel unintuitive, and all cells default to <td> with no native support for <th> headers. More critically, advanced features like <thead>, <tfoot>, and captions require manual element creation despite being part of the table specification.

As Christian Heilmann notes, this represents missed potential. Modern JavaScript revived form handling with APIs like FormData – why not tables? Native support for events like rowadded or cellupdated, column manipulation methods, and semantic element helpers could transform tables into first-class data structures rather than layout relics.

For now, this vintage API remains a powerful alternative to innerHTML for secure table generation. Its existence reminds us that sometimes the most elegant solutions are already in the browser – they just need rediscovery and advocacy for modernization.