如何用原生 JavaScript 将对象数组动态渲染为带加粗作者名的无序列表

2026-01-24

如何用原生 JavaScript 将对象数组动态渲染为带加粗作者名的无序列表

本文讲解如何使用纯 javascript（不依赖框架）将书籍信息对象数组转换为结构清晰的 html 无序列表，其中每位作者名以 `` 标签加粗显示，并与书名按指定格式组合。

在前端开发中，动态生成列表是常见需求。你已成功创建了

标签，尚未填充内容。要实现目标格式（如 **JK Rowling**: Harry Potter），关键在于：为每个列表项分别创建语义化子元素，并按顺序拼接内容。

以下是优化后的完整实现方案：

const myObj = [
  { name: "Harry Potter", author: "JK Rowling" },
  { name: "Hunger Games", author: "Suzanne Collins" },
  { name: "Lord of the Rings", author: "J. R. R. Tolkien" },
  { name: "Game of Thrones", author: "George R.R. Martin" },
  { name: "Percy Jackson", author: "Rick Riordan" }
];

// 1. 创建 UL 容器
const myUL = document.createElement("ul");
myUL.id = "myUL"; // 推荐使用 .id 而非 setAttribute，更简洁

// 2. 挂载到页面
const container = document.getElementById("myDiv");
container.appendChild(myUL);

// 3. 遍历数据，逐项构建 LI 及其子节点
for (const item of myObj) {
  const li = document.createElement("li");

  // 创建加粗的作者名 + 冒号（使用 strong 元素保证语义和样式）
  const authorEl = document.createElement("strong");
  authorEl.textContent = item.author + ": ";

  // 创建书名文本节点（避免 innerHTML，更安全高效）
  const nameText = document.createTextNode(item.name);

  // 按顺序追加子节点：authorEl 在前，nameText 在后
  li.appendChild(authorEl);
  li.appendChild(nameText);

  // 将完成的 li 插入 ul
  myUL.appendChild(li);
}

✅ 关键要点说明：