如何用原生 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);
  }

  ✅ 关键要点说明：

  • 使用 textContent 设置文本内容，避免 XSS 风险（相比 innerHTML 更安全）；
  • 不重复调用 document.getElementById("myUL")——直接复用已创建的 myUL 引用，提升性能；
  • strong 元素天然语义化，既满足加粗视觉需求，也利于可访问性（屏幕阅读器会强调）；
  • 冒号 ": " 直接拼接在 authorEl.textContent 中，确保与作者名紧邻、无多余空格；
  • 所有 DOM 操作集中在内存中完成后再批量挂载，减少重排（reflow）开销（本例虽小，但属良好实践）。

  ? 进阶提示： 若后续需支持点击编辑、删除或响应式交互，可为每个

  

  Andi

  智能搜索助手，可以帮助解决详细的问题

  下载
• 添加 data-index 属性或 dataset，便于事件委托精准定位对应数据项。

  立即学习“Java免费学习笔记（深入）”；

  这样生成的 HTML 结构语义清晰、样式可控，且完全符合现代原生 JavaScript 最佳实践。