Can someone please help me troubleshoot why this code snippet is not functioning properly in Internet Explorer but works fine in Firefox? I am fairly new to using the appendChild() method.
<html>
<head>
<script type='text/javascript'>
function createTable()
{
let newTable = document.createElement('table');
newTable.setAttribute('id', 'myNewTable');
newTable.setAttribute('border', '1');
let row1 = document.createElement('tr');
let cell1 = document.createElement('td');
cell1.setAttribute('colspan', '2');
let centerCell1 = document.createElement('center');
let boldText = document.createElement('b');
boldText.appendChild(document.createTextNode('Title'));
centerCell1.appendChild(boldText);
cell1.appendChild(centerCell1);
row1.appendChild(cell1);
let row2 = document.createElement('tr');
let cell2_1 = document.createElement('td');
let centerCell2_1 = document.createElement('center');
centerCell2_1.appendChild(document.createTextNode('21'));
cell2_1.appendChild(centerCell2_1);
let cell2_2 = document.createElement('td');
let centerCell2_2 = document.createElement('center');
centerCell2_2.appendChild(document.createTextNode('22'));
cell2_2.appendChild(centerCell2_2);
row2.appendChild(cell2_1);
row2.appendChild(cell2_2);
newTable.appendChild(row1);
newTable.appendChild(row2);
alert('Almost there!');
try
{
document.getElementById('mainContainer').appendChild(newTable);
}
catch(error)
{
alert(error.message);
}
return;
}
</script>
</HEAD>
<BODY>
<div id='mainContainer'>
</DIV>
<input type=button value='Go' onclick='createTable();'>
</BODY>
</HTML>