Javascript 通过createElements和querySelector创建DOM元素

我收到以下错误消息：

“键不是定义的”

我正在尝试使用包含表行、单元格和数据的createElement创建新的DOM节点。行必须包含以下单元格：ISBN编号、标题、项目价格、数量和计算的总价

（项目价格*数量）

使用appendChild将每个新节点追加到DOM片段

---

我发现您在

标记中缺少

id

属性。因此，只需添加该属性并填充表格：

//检查页面是否仍在加载。
如果（document.readyState=='loading'）{
//仍在加载，因此添加一个事件侦听器以等待它完成。
document.addEventListener（'DOMContentLoaded'，addData）；
}否则{
//DOM已经准备好了，请运行程序！
addData（）；
}  
//获取包含项数据的对象，并添加
//将数据复制到DOM中的现有表中
函数addData（）{
让书{
9781118876138:{isbn:“9781118876138”，
标题：“数据科学与大数据分析”，
价格：60.00，
数量：1}，
9781107186125:{isbn:“9781107186125”，
标题：“数据库管理原则”，
价格:77.99，
数量：1}，
9781587205880:{isbn:“9781587205880”，
标题：“CCNA路由和交换便携式命令指南”，
价格：24.00，
数量：2}，
9781119288312:{isbn:“9781119288312”，
标题：“CCNA路由和交换：考试”，
价格:73.50,，
数量：2}，
9781305078628:{isbn:“9781305078628”，
标题：“动手操作MICROSOFT WINDOWS SERVER 2016”，
价格：108.75，
数量：1}，
9781541895386:{isbn:“9781541895386”，
标题：“WEB开发简介”，
价格:65.25，
数量：1}，
9781943872381:{isbn:“9781943872381”，
标题：“MURACH的PHP和MYSQL”，
价格:43.25,，
数量：1}，
9780134167008:{isbn:“9780134167008”，
标题：“为JAVA访问卡狂欢”，
价格:86.75，
数量：1}，
};
//选择表格的主体。
让tableBody=document.querySelector（“#groceries tbody”）；
让groceryKeys=Object.key（书籍）；
让groceryCount=groceryKeys.length；
让groceryValues=Object.values（书籍）；
//创建临时DOM片段以保存元素。
让fragment=document.createDocumentFragment（）；
让项目；
让我们描述一下；
让价格；
让数量；
让tr；
让运输署,；
让文字；
//循环浏览我们的食品杂货，并为每个食品杂货建立一个表行。
用于（输入书籍）{
项目=书籍[键]；
isbn=项目。isbn；
title=item.title；
价格=项目价格；
数量=项目数量；
tr=document.createElement（“tr”）；
td=document.createElement（“td”）；
text=document.createTextNode（isbn）；
td.儿童（文本）；
tr.appendChild（td）；
td=document.createElement（“td”）；
text=document.createTextNode（标题）；
td.儿童（文本）；
tr.appendChild（td）；
td=document.createElement（“td”）；
text=document.createTextNode（价格）；
td.儿童（文本）；
tr.appendChild（td）；
td=document.createElement（“td”）；
text=document.createTextNode（数量）；
td.儿童（文本）；
tr.appendChild（td）；
td=document.createElement（“td”）；
text=document.createTextNode（价格*数量）；
td.儿童（文本）；
tr.appendChild（td）；
//将表行添加到DOM片段中。
片段。追加子片段（tr）；
}
//将DOM片段添加到表体的末尾。
tableBody.appendChild（片段）；
}

采购物品
ISBN
标题
项目价格
量
全部的
小计
税
总成本

//检查页面是否仍在加载。
如果（document.readyState=='loading'）{
//仍在加载，因此添加一个事件侦听器以等待它完成。
document.addEventListener（'DOMContentLoaded'，addData）；
}否则{
//DOM已经准备好了，请运行程序！
addData（）；
}  
//获取包含项数据的对象，并添加
//将数据复制到DOM中的现有表中
函数addData（）{
让书{
9781118876138:{isbn:“9781118876138”，
标题：“数据科学与大数据分析”，
价格：60.00，
数量：1}，
9781107186125:{isbn:“9781107186125”，
标题：“数据库管理原则”，