我有一个单文件网站...我们都知道带宽和互联网...是的...这就是为什么我只在需要时渲染部分用户界面。现在我想更进一步，使用 JSON 来存储我网站的一小部分(html 元素树)并按需生成实际的 HTML。
但是我正在努力弄清楚如何将 JSON 对象“转换”为普通的旧 HTML。我找到了许多关于如何实现这一目标的主题和答案，但这些都没有解决问题。我需要一个可以生成具有任意数量的 chid 元素、子元素内部等等的树的解决方案...所有这些解决方案都使用 .innerHTML 这实际上可以使我的所有事件处理程序无效。我没有发现任何我不知道的东西......
JSON 表示法如下所示:
var htmlTree = {
'type': 'section',
'attr': {
'id': 'someID',
'class': 'someClass'
},
'content': 'section name',
'children': [
{
'type': 'h1',
'attr': {
'class': 'heading'
},
'content': 'Heading',
'children': [
{
'type': 'span',
'content': 'text'
},
{
'type': 'span',
'content': 'more text'
}
]
}
]
}结果将如下所示:
<section id="someID" class="someClass">
section name
<h1 class="heading">
Heading
<span>text</span>
<span>more text</span>
</h1>
</section>有人知道这个问题的解决办法吗？我真的不想使用任何框架或库。我知道做这样的事情有点困难，所以我在这里问......
最佳答案
现在的带宽很便宜，因为服务器支持 gzip，所以占用的带宽甚至更少。为什么要结合更具吸引力的 Json 和库来创建 HTML？
不处理 JSON，而是注入(inject)准备好的(部分)html - 通过 Ajax 加载。
您可以尝试类似的操作，但只有当您有许多相同的行(并且您的数据非常简单)时，这才有意义。
<html>
<body>
<div id="ct"></div>
<script>
var data = [{
"id" : 1,
"f" : "Arya",
"l" : "Stark"
},
{
"id" : 1,
"f" : "Jon",
"l" : "Snowk"
}];
var parent = document.getElementById("ct");
data.forEach( function (row) {
newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>" + row.f + " " + row.l + "</h1>";
parent.append(newDiv);
})
</script>
</body>
</html>关于javascript - 从 JSON 数据生成 HTML 树，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57633560/