请问我在写js时遇到这种错误，找了好久，到底哪出错了呀，谢谢
<!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>Document</title>
<style>
</style>
</head>
<body>
<div class="head">
</div>
<thread>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</thread>
</body>
<script>
var data = [{
id: 1,
name: '小米',
price: 3999
},{
id: 2,
name: 'oppo',
price: 999
}, {
id: 3,
name: '荣耀',
price: 1299
}, {
id: 4,
name: '华为',
price: 1222
}];
//1.获取相应元素
var tbody = document.querySelector('tbody');
//2.把数据渲染到页面中
data.forEach(function (value) {//这里的value是一个对象
var tr = document.createElement('tr');
console.log(tr);
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.name + '</td><td>' + value.price + '</td>';
tbody.appendChild(tr);
});
</script>
</html>
