添加动态更新表内容.Javascript

Question

正在使用来自数据库的数据构建表。在我的html页面上，我可以看到表格及其内容。但是，当我右键单击以查看源代码时，我在dom上看不到任何内容。有人能帮忙吗。

//build list of booking
async function get_booking() {
let res = await fetch('http://127.0.0.1:8000/api/booking/today/%27);
let data = await res.json();

//build table
const len = data.length;
if (len > 0) {
for (let i = 0; i < len; i++) {
document.querySelector('tbody').innerHTML += 
<tr class="d">
<td>${data[i].id}</td>
<td data-agent ="${data[i].coy}" >${data[i].name}</t>
<td data-trip="${data[i].trip}">${data[i].trip}</td>
<td data-busstop="${data[i].bus_stop}" >${data[i].bus_stop}</td>
<td data-startdate="${data[i].start_date}">${data[i].start_date}</td>
<td data-end="${data[i].end_date}">${data[i].end_date}</td>
<td data-departure="${data[i].departure}">${data[i].departure}</td>
<td><button class="update" data-booking="${data[i].id}" type="submit"><i class="fa fa-edit"></i></button></td>
</tr>;
}
}

Answer 1

这很正常。因为源始终是页面的原始源(即页面加载标记(，并且它不会显示页面加载后所做的更改。如果你想在更改后检查源代码，你必须使用像chrome开发工具或firebug这样的工具。

https://developers.google.com/web/tools/chrome-devtools
https://getfirebug.com/