javascript中的动态创建表未正确显示列

// 创建表格
var table = document.createElement('table');

// 创建表头
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
th1.textContent = '列1';
var th2 = document.createElement('th');
th2.textContent = '列2';
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);

// 创建表体
var tbody = document.createElement('tbody');
var data = [
  { col1: '数据1', col2: '数据2' },
  { col1: '数据3', col2: '数据4' }
];
data.forEach(function(item) {
  var tr = document.createElement('tr');
  var td1 = document.createElement('td');
  td1.textContent = item.col1;
  var td2 = document.createElement('td');
  td2.textContent = item.col2;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
});

// 将表头和表体添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中的某个元素中
var container = document.getElementById('container');
container.appendChild(table);