迭代地将对象的JavaScript字典打印到HTML div中

如果您能根据Javascript字典中的项目数量迭代生成underwever div，我将不胜感激

    <div class="container" style="padding-bottom: 10px;">
        <div class="dropdown" style="padding: 10px;">
            <a href="#">TOP 3 PS5 HEADSETS<i class="fa fa-chevron-down"></i>
            </a>
            <ul>
                <div id="links">

                    <center>
                        <p>3: &darr; INSERT TITLE FOR STEELSERIES &darr;</p>
                    </center>
                    <div class="product">
                        <img src="img/products/h-steelseries.png">
                        <a class="link" href="INSERT LINK HERE">Read More</a>
                    </div>

                    <center>
                        <p>3: &darr; INSERT TITLE FOR OTHER&darr;</p>
                    </center>
                    <div class="product">
                        <img src="img/products/h-other.png">
                        <a class="link" href="INSERT LINK HERE">Read More</a>
                    </div>
                </div>
            </ul>
        </div>
    </div>

我查看了其他答案，但找不到用于自动生成div的对象字典的示例。我打算使用它列出网站上的项目，并希望将对象附加到字典中，并在脚本执行后自动为每个对象生成一个新的div

---

谢谢您的时间。

您可以简单地在对象上循环，并在循环中创建所需的节点

这里有一个更简单的版本

var prod_obj={
“耳机产品”：{
“标题”：“钢铁系列”，
},
“其他产品”：{
“标题”：“其他产品”，
}
};
用于（让钥匙进入prod_obj）{
const div=document.createElement（“div”）；
div.innerText=prod_obj[keys]。标题
document.body.appendChild（div）
}

您可以简单地在对象上循环，并在循环中创建所需的节点

这里有一个更简单的版本

var prod_obj={
“耳机产品”：{
“标题”：“钢铁系列”，
},
“其他产品”：{
“标题”：“其他产品”，
}
};
用于（让钥匙进入prod_obj）{
const div=document.createElement（“div”）；
div.innerText=prod_obj[keys]。标题
document.body.appendChild（div）
}

您可以使用for in循环和模板文本来实现您希望在此处实现的目标

const prod_obj={
“耳机产品”：{
“标题”：“钢铁系列”，
“图片”：“h-steelseries.png”，
“href”：“steelseries.html”
},
“其他产品”：{
“标题”：“其他产品”，
“图片”：“h-other.png”，
“href”：“other.html”
}
};
const div=document.getElementById（'insertHere'）；
用于（让产品输入产品对象）{
设{title，image，href}=prod_obj[products_key]；
让html=`Title:${Title}，Image:${Image}，href:${href}
`；
div.insertAdjacentHTML（'beforeend'，html）；
}

---

您可以使用for in循环和模板文本来实现您希望在此处实现的目标

const prod_obj={
“耳机产品”：{
“标题”：“钢铁系列”，
“图片”：“h-steelseries.png”，
“href”：“steelseries.html”
},
“其他产品”：{
“标题”：“其他产品”，
“图片”：“h-other.png”，
“href”：“other.html”
}
};
const div=document.getElementById（'insertHere'）；
用于（让产品输入产品对象）{
设{title，image，href}=prod_obj[products_key]；
让html=`Title:${Title}，Image:${Image}，href:${href}
`；
div.insertAdjacentHTML（'beforeend'，html）；
}

---

根据MDN上的文档，您所描述的内容听起来像是一个合适的候选人：

HTML Content Template（）元素是 保存在页面打开时不会立即呈现的HTML 已加载，但随后可以在运行时使用 JavaScript

下面使用一个简单的类为源数据（您称之为

字典

）中找到的每个产品加载指定模板的新实例。从阴影中加载模板后，可以根据需要操纵内容。如果更改模板的设计，则更改最终布局的设计。在原始HTML中，单个产品周围没有

span

元素，但我编写模板加载器（用于特定作业）的方式完全克隆了

first

子元素，因此

span

不会影响布局，除非专门为此设置样式

类模板加载程序{
建造师（id）{
这个.id=id；
返回此参数。create（）；
};
gettemplate（）{
return document.querySelector（'template[data id=“”+this.id+“]”）false
};
克隆（）{
设tmpl=this.gettemplate（）；
返回tmpl？tmpl.content.firstElementChild.cloneNode（true）：false；
};
gettarget（）{
return document.querySelector（'div[id=“”+this.id+“]”）false；
};
创建（）{
让tmpl=this.clone（）；
如果（tmpl）{
让target=this.gettarget（）；
target.appendChild（tmpl）；
返回tmpl；
}
返回false；
};
};
var prod_obj={
“耳机产品”：{
“标题”：“钢铁系列”，
“image”：“h-steelseries.png”，
'href'：'steelseries.html'
},
“其他产品”：{
“标题”：“其他产品”，
“image”：“h-other.png”，
'href'：'other.html'
},
“香蕉”：{
“标题”：“曲线和黄色”，
“image”：“b-a-nana.png”，
'href'：'banana.html'
}
};
让id='links'；
Object.keys（prod_obj）.forEach（cat=>{
让数据=生产对象[cat]；
设oTmpl=newtemplateloader（id）；
oTmpl.querySelector（'center>p'）.textContent=data.title；
oTmpl.querySelector（'div.product>img'）.src=['img/products'，data.image].join（'/'）；
oTmpl.querySelector（'div.product>a.link'）。href=data.href；
});




阅读更多
根据MDN上的文档，您所描述的内容听起来像是一个合适的候选人：

HTML Content Template（）元素是
保存在页面打开时不会立即呈现的HTML
已加载，但随后可以在运行时使用
JavaScript

下面使用一个简单的类为源数据（您称之为
字典
）中找到的每个产品加载指定模板的新实例。从阴影中加载模板后，可以根据需要操纵内容。如果更改模板的设计，则更改最终布局的设计。在最初的HTML中，没有
span
元素围绕单个产品，而是我编写模板loa的方式
var prod_obj = {
    "headphone_products" : {
        "title": "Steelseries",
        "IMAGE": "h-steelseries.png",
        "HREF" : "steelseries.html"
},
"other_products" : {
    "title": "Other product",
    "IMAGE": "h-other.png",
    "HREF" : "other.html"
}
};