我一直在仅使用 JS 和 CSS 在 codepen 上构建一个虚拟魔方。- 原谅我任何明显的愚蠢，我编码不到 3 个月，而 JS 不到 1 个月。
我目前制作了两个版本，但对于版本 3，我需要使用 JSON 和 JS 循环结构生成尽可能多的 HTML。尽管对 JSON 进行了大量阅读，但我无法完全理解使用它生成 HTML 的概念，就像我使用标准 JS 数组一样。见 codepen 链接——http ://codepen.io/Peachey_A/pen/hEcDH
虽然我在版本 2 中使用了一点 JQuery 来添加类属性；我想在生成过程中避开它，因为我的目标是在过度参与库之前了解 JS。
任何特定网站或代码片段示例的建议将不胜感激。
谢谢
As far as manipulating JSON I recommend using a library (if your browser doesn't support it natively), but if you are trying to get away from jQuery you should take a look at http://youmightnotneedjquery.com/
首先，我相信您需要将该 JSON 转换为 Javascript。看看这个很棒的答案Parse JSON in JavaScript? . 现在，对于不支持转换的浏览器，建议使用库。如果您想手动完成，JSON 解析器就是一个独立的项目。
完成后，您可以操作对象，遍历它们
并开始根据您的 JSON 数据吐出 html。
JSON 是一种传输格式，而不是一种布局语言/标记语言。您需要一些 JS 来解析和理解它附带的数据，以及一些 HTML 构建工具来将其转换为 HTML。
如果您愿意，您可以构建一个解析器，但这需要太多时间。这对你学习语言没有多大帮助。此外，jQuery 有一个内置的解析器，它已经很有帮助了。
var div = $('<div/>',{id : 'foo'})[0]; // instant <div id="foo"></div>
其他从 JS 对象生成 HTML 的工具是像 Mustache 和 Handlebars 这样的模板库。
在旁注中，不要学习语言本身。学习如何使用语言。最终，您将了解在使用库时跳过的其他怪癖。另外，不要提倡“不是在这里发明”的哲学。它只是浪费你的时间。花更多的时间在有意义的事情上。