Javascript 如何将JSON数据解析为HTML元素

我有一个带有HTML的JSON数据

像这样：

"elements":[
{
   "element":".dyno-text",
   "value":"This fun here.<br> <button type='button' onclick='changeTheme(this)' data-theme='sketchy' class='theme-link btn btn-light'>Sketchy</button>",
   "class": 'text-success'
}
]

“元素”：[
{
“元素”：“.dyno文本”，
“价值”：“这里很有趣。
简略”，
“类”：“文本成功”
}
]

我将如何将这个JSON数据解析为引导布局设计，例如：Button将成为现实

---

谢谢

你可以这样做；我更改元素是为了创建一个已知的HtmleElement，所以这里要做的是迭代元素数组，将它们插入到主体中，设置值，然后切换类

--编辑--

清洁剂解决方案，因为它指出了超冷

let元素=[
{
“元素”：“div”，
“价值”：“这里很有趣。
简略”，
“类”：“文本成功”
}
]
elements.forEach（（elemen，i）=>{
让createdElement=document.createElement（elemen.element）
createdElement.innerHTML=elemen.value
createdElement.classList.toggle（elemen.class）
document.body.appendChild（createdElement）
})

使用

Vue.component

将JSON组装为一个组件可能是一个解决方案

但是您可能需要调整JSON中的HTML模板。因为要支持一些特性，例如

onclick

、binding

class

，这将是一个非常头痛的问题

下面是一个演示，它可能会为您提供一些如何实现目标的想法

newvue({
el:“#应用程序”，
数据（）{
返回{
“要素”：[
{
“元素”：“动态文本”，
“价值”：“这里很有趣。
简略”，
“类”：“文本成功”，
“方法”：{
//将onclick更改为@click，如果您仍然希望在模板中使用“onclick”，则必须定义window.changeTheme
changeTheme:function（obj）{console.log（'clicked'）}
}
}
]
}
},
方法：{
createComponent（元素）{
/*window.changeTheme=函数（）{
console.log（'单击onclick'）
}*/
返回Vue.component（element.element{
模板：`${element.value}`，
挂载：函数（）{
这个.$nextTick（（）=>{
这是.refs.test.querySelector（'button.btn'）.classList.add（element.class）
//或者调整JSON中的模板，比如“`”，然后将element.class绑定到data property=classes
})
},
方法：元素法
})
}
}
})

您最后应该执行appendChild，您可以忽略document.getElementsByClassNameNice。我更改了它。谢谢呈现的预期输出是什么？它在这里是不是很有趣。
Sketchy？它应该在一个div中输出值，比如：

这里很有趣。粗略的

是。你是对的。如果

元素.value

有多个

，输出是什么？两个按钮具有相同的类？每个按钮都有自己的类。