DOM是针对HTML和XML文档的一个API(应用程序编程接口),DOM描绘了一个层 次化的节点树,允许开发人员添加,移除,修改页面的某一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格显示</title>
<script>
window.onload = function(){
var arr = [{
id:1001,
name:'hb',
age:22,
},{
id:1002,
name:'lm',
age:21,
},{
id:1003,
name:'yoyo',
age:27,
}];
var btn = document.getElementsByTagName('button')[0];
var tbody = document.getElementsByTagName('tbody')[0];
btn.onclick = function(){
tbody.innerHTML = '';
arr.forEach(function(item){
var newTr = document.createElement('tr');
for(var key in item){
var newTd = document.createElement('td');
newTd.innerText = item[key];
newTr.appendChild(newTd);
};
tbody.appendChild(newTr);
});
};
}
</script>
</head>
<body>
<button>加载数据</button>
<table>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</tbody>
</table>
</body>
</html>
运行结果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/30ffd13d886293dc4b8302c00d642be7.png)
点击按钮后:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ecfbc4d0eea01b2cf7a0a45f72f79885.png)