Javascript 如何循环对象中的值并在HTML中呈现它们？

好吧，我是个认真的傻瓜，我整天都在研究，似乎找不到解决办法。我有一个包含多个数据的对象，我试图在循环中渲染这些数据

            var domainName = 'mywebsite.com'    

            var games = [

                {
                    name: 'name1',
                    url: "https://www" + domainName + "/game.html",
                    imgFile: 'img1.jpg'
                },
                
                {
                    name: 'name2',
                    url: "https://www" + domainName + "/game.html",
                    imgFile: 'img2.jpg'
                },



            ];

我该如何使用循环来自动生成数据

<h1>name1</h1>
<a href="url"></a>
<img src="img1" />

<h1>name2</h1>
<a href="url"></a>
<img src="img2" />

name1
姓名2

任何帮助都将不胜感激。我知道这可能很简单，我只是太新了，找不到线索（

可以轻松使用：

 let renderedHtml=games.map(function(item){
       return `<h1>${item.name}</h1><a href="${item.url}"></a><img src="${item.imgFile}"/>`
    });

let renderedHtml=games.map（函数（项目）{
返回`${item.name}`
});

如果您使用的是香草JavaScript，则可以使用JavaScript映射函数迭代数组中的每个对象

同样对于创建元素，可以使用JS的createElement（）方法，并且可以更改各个元素的属性并将其附加到DOM中

games.map((game) => {
  var h2 = document.createElement('H2'); // create <h2> element
  h2.innerHTML = game.name;
  document.body.appendChild(h2); // append to the DOM

  var a = document.createElement('A'); //create <a> element
  a.innerHTML = game.name;
  a.href = game.url
  document.body.appendChild(a);

  var img = document.createElement('img'); //create <img> element
  img.src = game.imgFile;
  document.body.appendChild(img);
})

games.map（（游戏）=>{
var h2=document.createElement（'h2'）；//创建元素
h2.innerHTML=game.name；
document.body.appendChild（h2）；//追加到DOM
var a=document.createElement（'a'）；//创建元素
a、 innerHTML=game.name；
a、 href=game.url
文件.正文.附件（a）；
var img=document.createElement（'img'）；//create
var domainName='.mywebsite.com'；
var博弈=[{
名称：'name1'，
url:“https://www“+domainName+”/game.html”，
imgFile:'img1.jpg'
},
{
名称：'name2'，
url:“https://www“+domainName+”/game.html”，
imgFile:'img2.jpg'
},
];
对于（i=0；i
var domainName='mywebsite.com'
var博弈=[
{
名称：'name1'，
url:“https://www“+domainName+”/game.html”，
imgFile:'img1.jpg'
},
{
名称：'name2'，
url:“https://www“+domainName+”/game.html”，
imgFile:'img2.jpg'
},
];
var元素=document.querySelector（'#myDiv'）；
游戏。forEach（（v）=>{
element.innerHTML+=`
${v.name}
`;
});

var domainName = 'mywebsite.com'    
var games = [
    {
        name: 'name1',
        url: "https://www" + domainName + "/game.html",
        imgFile: 'img1.jpg'
    },
    {
        name: 'name2',
        url: "https://www" + domainName + "/game.html",
        imgFile: 'img2.jpg'
    },
];

var element = document.querySelector('#myDiv');
games.forEach((v)=>{
    element.innerHTML += `
        <h1>${v.name}</h1>
        <a href="${v.url}">${v.url}</a>
        <img src="${domainName}/${v.img}">`;
});