什么是JSON和HTML？

先说说咱们得搞清楚，JSON和HTML是什么东西。JSON就像一个包子铺的订单单，里面写着包子的种类、数量和价格。而HTML就像一个网页的骨架，告诉浏览器怎么显示这些包子信息，这玩意儿...。

JSON是什么玩意儿？

要我说... JSON就是JavaScript Object Notation，听起来高大上其实很简单。它就是用来存储数据的一种格式， 看起来像这样：

json { "name": "小王", "age": 25, "hobbies": }

这个东西特别适合在前端和后端之间传数据，主要原因是它很轻便，也很好理解，来一波...。

HTML又是什么东西？

HTML就是HyperText Markup Language，就是网页上的那些标签。比如：

这些标签告诉浏览器怎么显示内容。要是没有HTML， 我持保留意见... 网页就只能显示一堆乱七八糟的文字了。

为什么要把JSON转成HTML？

主要原因是现在很多网站都是前后端分离的。后端会给前端发送一大堆JSON数据，然后前端需要把这些数据变成漂亮的页面展示给用户看，就这样吧...。

就像你去餐厅点菜一样， 服务员会给你带来菜单，然后你需要根据这个菜单选择自己想吃的东西。 白嫖。 到头来呈现给顾客的是一份可口的美食。

最简单粗暴的方法：拼字符串

注意：这种方法很容易被XSS攻击！千万不要直接使用不信任的数据！

最简单粗暴的方法就是用JS拼接字符串。比如我们有一个这样的JSON：，我服了。

差不多得了... json { "name": "张三", "age": 18, "address": { "city": "北京", "street": "中关村大街" } }

代码示例：

javascript let person = { name: '张三', age: '18', address: { city: '北京', street: '中关村大街' } };，说白了...

let html = `

document.body.innerHTML = html;，别怕...

警告！千万不要直接插入用户提供的内容到innerHTML里面！否则会被黑客注入恶意代码！一定要先做好转义处理！比如使用textContent或者特殊字符转义函数。

缺点多多啊这个方法！

• 性能差 - 每次都要重新解析整个DOM树；
• 平安问题 - 隐患很大；
• 代码臃肿 - 一旦复杂就会难以维护；
• 调试困难 - 出错不容易找到问题所在。

稍微高级一点儿：使用模板引擎啦~

注意哦～模板引擎并不是原生JS功能哦～需要额外引入库才行～像Handlebars、Mustache这些～不过它们确实让我们更轻松地处理复杂模板～不过对小白来说可能有点儿难度哦～特别是异步加载啥的～有时候还会报错呢～ {{#each products}} {{this.name}} - ${{this.price}} {{/each}} ### 第二步：加载并渲染 javascript // 加载Handlebars库 const templateSource = document.getElementById.innerHTML; const template = Handlebars.compile; // 数据 const data = { products: }; // 渲染并插入到页面中 const html = template; document.body.innerHTML = html; 但是注意啦～如果模板加载失败或者有语法错误就会报错呢～而且每次改动都要刷新页面才能看到效果～太麻烦啦，结果你猜怎么着？！

- 不支持事件委托机制！ - 查询选择时需先插入实际DOM！ ⚠️ ## 第五种神奇玩意儿——虚拟DOM！ 虽然题目限制为纯JS但略提一下现代框架思路： 虚拟DOM将所有更新操作收集→进行diff算法→批量修改真实DOM。 本质仍然是通过JS对象表示UI状态然后映射为实际节点，我悟了。。

记住——编程没有唯一正确答案！ 只要达到目标并且满足需求即可！ 祝大家coding愉快！ ## 第四种选择——文档片段！ 文档片段是一种轻量级“容器”，它存在于内存中而不是实际 DOM 中。 优势： ✅ 减少回流次数 → 提升渲染效率 ✅ 不会触发布局计算 → 性能更佳 ✅ 支持批量操作 → 减少重绘频率 基本使用方式： // 生成片段 const fragment=new DocumentFragment; // 添加子节点 for{ const li=document.createElement; li.textContent=item.name; fragment.appendChild;} // 一次性插入 parentNode.appendChild; ⚠️ 注意事项： - 销毁时必须清空引用防止内存泄漏！

牛逼。 特别注意哦——如果涉及到复杂嵌套结构的话可能要写递归函数呢～ 而且如果节点过多的话性能也会受影响呀～ 不过总体来说还是比直接拼字符串平安多了！ 当然啦——如果项目要求不是特别严格的话其实也可以考虑虚拟DOM库如React/Vue之类 但是既然文章要求的是原生JS解决方案所以暂且不讨论这些框架啦! 希望这些混乱但真实的一些思路对各位初学者有些帮助吧！

！光看这代码就够晕人的！特别是那堆花括号和助手函数什么的一不小心就会出错呢～ ## 第三种方法比较实在——DOM操作！ 说白了就是自己亲手创建DOM元素并添加到页面上。 优点： - 平安性更高 - 性能更优 - 控制力更强 缺点： - 写起来比较麻烦 - 不太直观 ## 基本操作流程 1. 获取目标父元素 2. 动态创建新元素 3. 添加属性和内容 4. 添加到DOM树 ## 最简单范例——创建列表项 假设有这样的JSON： json ### JS代码部分 javascript // 获取容器元素 也许吧... letlistContainer=document.getElementById; // 准备测试数据 letmessages=; //遍历并创建DOM elements for{ //创建列表项 letlistItem=document.createElement; //添加ID属性 listItem.setAttribute; //添加内容 listItem.textContent=message.content; //添加到容器中 listContainer.appendChild;} 虽然平安但确实比较繁琐呀～不过至少不会被XSS攻击了！

换位思考... 而且性能也没那么好呢～ ## 嵌套复杂怎么办？ 假设我们有一个层级结构： json { menuItems : } , { title :'关于我们' , children : } ] } ### 模板文件 ### JS代码部分 javascript // 注册helper函数 handlebars.registerHelper {...}); const compiledTemplate=Handlebars.compile.innerHTMl); constdata={ menuItems:}; //这里填写实际数据 constfinalHtml=compiledTemplate; document.getElementById.innerHTMl=finalHtml; 这下复杂了吧？