innerHtml isn't inserting the text I need in my table header

December 26, 2022

I am trying to add text to a header using JavaScript. I can add the elements for a table header, table row, and table data using the following code. But I can’t seem to get innerHtml to work for inserting text into the table data element. I am not much of a JavaScript kind of guy, but the service I am using only supports raw html + javascript in it’s webservers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack Overflow Don't Judge Me!</title>
</head>
<body>
    <table id="table1">

    </table>
    <script>
        function writeHeaderToTable() {
            var tsTable = document.querySelector("#table1");    //Find the table with id of ts
            var tsHeader = tsTable.createTHead();               // Create a header for that table.
            var tsHeaderRow = tsHeader.insertRow(0);            // insert a row in that header.
            var tsCell = tsHeaderRow.insertCell(0);             // insert a cell in that row.
            tsCell.innerHtml = "<b>This is a header</b>";       // write to that cell some text. <--- This is not working! (╯°□°）╯︵ ┻━┻
        }
        writeHeaderToTable();
    </script>
</body>
</html>