使用JSON生成HTML元素、多个类名和id.-没有JQuery

Question

我一直在用JS和CSS构建一个虚拟的魔方。-请原谅我的愚蠢，我写代码还不到3个月，用JS还不到1个月。

我目前已经制作了两个版本，但对于版本3，我需要使用JSON和JS循环结构生成尽可能多的HTML。尽管做了大量关于JSON的阅读，但我不能完全理解使用它来生成HTML的概念，就像我使用标准JS数组一样。参见codepen链接——http://codepen.io/Peachey_A/pen/hEcDH

而我已经使用了一点JQuery添加类属性在版本2;我希望在生成过程中避开它，因为我的目标是在过多地涉及库之前了解JS。

对具体网站或代码片段示例的任何建议将不胜感激。

谢谢

Answer 1

至于操作JSON，我建议使用库(如果您的浏览器本身不支持它)，但如果您试图摆脱jQuery，您应该看看http://youmightnotneedjquery.com/

Answer 2

JSON是一种传输格式，而不是布局语言/标记语言。您需要一些JS来解析和理解随之而来的数据和一些HTML构建工具将其转换为HTML。

如果你想，你可以构建一个解析器，但是那会花费太多时间。那对你学习这门语言没有多大帮助。此外，jQuery有一个内置的解析器，这已经很有帮助了。

var div = $('<div/>',{id : 'foo'})[0]; // instant <div id="foo"></div>

其他从JS对象生成HTML的工具是像Mustache和Handlebars这样的模板库。

---

顺便说一句，不要学习语言本身。学习如何使用这门语言。最后，您将了解在使用库时跳过的其他怪异之处。此外，不要培养"非我发明"的哲学。这只会浪费你的时间。花更多的时间在重要的事情上。

Answer 3

首先，我认为您需要将JSON转换为Javascript。看看这个很棒的答案:用JavaScript解析JSON ?现在，对于不支持转换的浏览器，建议使用库。如果您想手工完成，JSON解析器是一个独立的项目。

一旦你完成了，你可以操作对象，迭代它们

并开始根据JSON的数据生成html。