how to dynamically create table header cell

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h2>How can I dynamically create a <th> cell using javascript!</h2>
    
<p>Click the button to insert new cell(s) at the end of the table row.</p>
<button onclick="addRow()">add rows</button><br />
<button onclick="addColumn()">add column</button> <br />
<button onclick="addHeaderCell()">add header cell</button>
</div>
<table border="1" id="myTable">
	<tr>
		<th>1</th>
		<td>2</td>
  </tr>
</table>

<script>
function addRow()
{
	var table = document.getElementById("myTable");
	var tr = document.createElement("tr");
    var th = document.createElement("th");
    var td = document.createElement("td");
    td.innerText = "im a td";
    th.innerText = "im a th";
    tr.appendChild(th);
    tr.appendChild(td);
    table.appendChild(tr);
}

function addColumn(){
	var table = document.getElementById("myTable");
	var rows = table.rows;
	console.log("rows", rows);
	
	for (var i = 0; i < rows.length; ++i) {                
        // td = rows[i].cells;
		var td = document.createElement("td");
		td.innerText = i;
		rows[i].appendChild(td);	
	}   	
}


function addHeaderCell(){
  var table = document.getElementById("myTable");
  var th = document.createElement("th");
  th.innerText = "im a th";
  var row1 = table.rows[0];
  row1.appendChild(th);
}

</script>
    
    
  </body>

</html>

// Code goes here

/* Styles go here */