从Json响应javascript创建flex box列

基于json响应创建一组列，例如：

foreach（json中的var item），然后{Create div+item.id+item.icon+div}

。注意：不能使用以（thicks``开头的模板，因为这会在IE11上导致错误。不知道为什么

我试过：

为列表中的每个项目创建一列，其中包含文本 实际结果 我在这里尝试了一个类似的例子 [问题]：。但不幸的是，答案并不适用于我。我希望输出像这样

---

，因此，我想在段落中显示上面的文本，而不是在每列中显示1、2、3。例如：如果Json是30个项目，那么我将显示30个列及其各自的样式。

您没有说明如何从Json中获取文本，因此我将留给您并假设一个文本数组，因此下面是如何将其附加到元素中（假设您的问题还不完整）

函数appendNewThing（jsonTxt）{
让容器=document.createElement（“div”）；
container.className=“儿童持有人”；
设newP=document.createElement（“p”）；
newP.className=“child”；
让newContent=document.createTextNode（jsonTxt）；
newP.appendChild（newContent）；
container.appendChild（newP）；
document.getElementsByClassName（“flex容器”）[0].appendChild（容器）；
}
让textFromJSON=[“jtext 1”、“My 2”、“Text 3”、“Last 4”]；
textFromJSON.forEach（appendNewThing）

.flex容器{
显示器：flex；
背景色：#73A3FF；
}
.flex container>.child holder{
背景色：#D3f4FF；
边缘：0.25em；
填充：0.25em；
}
.儿童持有人{
边框：1px实心#5577FF；
}
.孩子{
颜色：#0000FF；
字号：1.5em；
}

创建一组列

在你的问题中显示你的CSS，因为这是你问题的关键所在。你还应该发布HTML“.flex容器”是什么

let container+=
 +  '<div class=" ">'
 + ' <p class=" child ">text from json </p> '

 document.querySelector('.flex-container').innerHTML = container;