如何动态显示从Javascript到HTML的对象数组中的所有项目？

我是Javascript新手，在一项任务中，我被指示创建2个

JS

文件，然后用HTML动态显示数据。一个JS文件

data.JS

文件具有对象的

数组（产品目录），另一个JS文件具有加载这些项目、创建HTML元素和在HTML页面上显示项目（目录）的功能。但是我的代码不起作用，并且没有以要求的格式显示产品？css也没有在函数中加载。我确信某些语法是正确的，所以我在loadProducts（）中对该代码进行了注释。
我附上一个截图作为参考，该功能预计如何准确工作。请在这方面帮助我


//data.js
变量目录=[
{
代码：100，
名称：“学习JS”，
desc:“使网页动态化”，
价格:150,，
图片：“/images/100Tshirt.jpg”
},
{
代码：101，
姓名：“T恤”，
描述：“Lorem ipsum，或者有时称之为lipsum，是用于布置印刷品、图形或网页设计的虚拟文本。”，
价格:0,，
图片：“/images/101Tshirt.jpg”
},
{
代码：102，
姓名：“T恤”，
描述：“Lorem ipsum，或者有时称之为lipsum，是用于布置印刷品、图形或网页设计的虚拟文本。”，
价格:0,，
图像：“/images/102Tshirt.jpg”
}
// {
//姓名：“Meowsalot”，
//物种：“猫”，
//食品：[“金枪鱼”、“猫爪鱼”、“芹菜”]，
//出生年份：2012年，
//照片：“https://learnwebcode.github.io/json-example/images/cat-1.jpg"
// 
];
//Code精品.js
函数chargerticles（）{
var articles=document.getElementById（“内容”）；
对于（var i=0；i请回顾屏幕截图中的说明。我可以清楚地看到您跳过的说明，这些说明可以解决您的问题

特别是：

插入articleName作为article元素的子元素

appendChild（）
（来自您的注释）是正确的函数，但是
document.body
是调用它的错误对象。请仔细考虑

我假设下面是一条指令，将文章作为目录表（“articles”）的子项插入

如果您没有使用作业说明中推荐的变量名，可能会有点令人困惑。当然，如果您知道自己在做什么，您可以很容易地让代码使用不同的变量名，但是由于您已经声明自己是初学者，我建议现在更仔细地遵循指南。
您正在创建一个新的变量名循环中没有HTML元素，但您没有将它们附加到任何地方。顺便说一句，
productName
在您的
loadProducts
functionsBtw
productName.classList.add（“addClass”）；var productName=document.createElement（“h2”）中没有定义
这两个语句的顺序应该完全相反吗？谢谢。我已经更新了它