渲染数据：把 JSON 变成页面

这是什么：渲染 = 把请求回来的 JSON 数据，转换成 HTML 标签并插入网页——「数据进来，界面出去」的那一步。

为什么用：请求回来的数据只打印在控制台没有意义；用户要看的是界面。会渲染，fetch 才算真正派上用场，这也是 Vue/React 框架帮你自动化的那件事的原始形态。

如何用：固定三步——准备容器 → 遍历数据拼 HTML 字符串 → innerHTML 一次塞进去。本章把 JSONPlaceholder 的 5 篇文章渲染成列表页。

渲染三步法

<ul id="list">加载中…</ul>   <!-- ① 容器：页面上先留个坑 -->

fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
  .then(res => res.json())
  .then(posts => {
    // ② 遍历数据：每篇文章拼成一个 <li> 字符串
    let html = ''
    for (let post of posts) {
      html += `<li><b>${post.title}</b><br>${post.body}</li>`
    }
    // ③ 一次插入：字符串塞进容器
    document.getElementById('list').innerHTML = html
  })

「你会看到」：ul 里的「加载中…」被替换成 5 个列表项，每项有标题和正文。数据变了，改的就是 html 怎么拼——界面完全由数据决定。

模板字符串是渲染的主力

${} 里可以直接放数据、算式、甚至三元表达式：

let html = `<li>
  <b>${post.title}</b>
  <span class="author">作者 ID：${post.userId}</span>
  ${post.body.length > 50 ? post.body.slice(0, 50) + '…' : post.body}
</li>`

多行随便写，缩进即排版，比一串 + 号拼接清爽得多。这就是 JS 教程里模板字符串知识的主战场。

完整小示例：文章卡片列表

把三步法装进一个完整页面（保存为 index.html 用本地服务器打开，或直接贴进在线运行场）：

<div id="app">加载中…</div>

<style>
  .card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin: 8px 0; }
  .card h3 { margin: 0 0 6px; }
</style>

<script>
  fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')
    .then(res => res.json())
    .then(posts => {
      let html = posts.map(function (post) {
        return `<div class="card">
          <h3>${post.id}. ${post.title}</h3>
          <p>${post.body.replace(/\n/g, '<br>')}</p>
        </div>`
      }).join('')          // map 出数组后拼成一整个字符串
      document.getElementById('app').innerHTML = html
    })
</script>

你会看到：三张圆角卡片，每张有编号、标题和正文。

逐段中文精讲

• 容器与占位：#app 初始文字是「加载中…」——数据回来前的自然占位符，第 5 章会把它升级成正式的加载态。
• .map(...) 替代 for 循环：map 把每个 post 变成一段 HTML，返回数组；.join('') 把数组无缝拼成一整个字符串。map + join 是渲染列表的经典组合。
• post.body.replace(/\n/g, '<br>')：JSON 里的换行符 \n 在 HTML 里不换行，替换成 <br> 才能正常分段——数据进 HTML 前，先做格式处理。
• 一次 innerHTML：拼好再一次性赋值，比循环里每轮都改 DOM 快得多（每次赋值都触发浏览器重排）。

一个必须知道的安全习惯

innerHTML 会把字符串当 HTML 执行。渲染用户输入的内容前，要防「把 <script> 塞进正文」的注入攻击；入门阶段记住两条：渲染自家接口数据没问题；渲染用户提交的内容时，先做转义或用 textContent 赋值纯文本。

记忆口诀：容器先留坑，循环拼字符串；拼好一次插，数据变界面。

📝 本章小结

• 渲染三步：容器 → 遍历拼 HTML 字符串 → innerHTML 插入
• map + join('') 是列表渲染黄金组合，模板字符串负责拼
• JSON 里的 \n 要换成 <br> 才在页面正常换行
• 拼好一次插入，性能更好；用户输入要防注入

动手改

1. 给卡片加一个「作者 ID 徽章」：从 post.userId 渲染出来
2. 把 _limit=3 改成 10，看看页面变化
3. 进阶：先请求 /users/1，把用户名渲染在卡片列表上方（两次 fetch 串联）

上一章：fetch：请求数据 · 下一章：POST 提交数据 🐸