如何用原生 JavaScript 从对象数组动态生成带加粗作者名的无序列表

本文教你使用纯 javascript 将书籍对象数组转换为结构化 html 无序列表，其中每位作者名以 `` 标签加粗显示，并与书名按“作者：书名”格式组合呈现。

在前端开发中，常需将结构化数据（如对象数组）动态渲染为语义清晰的 HTML 列表。你提供的代码已成功创建

元素并循环生成
• ，但尚未向列表项中注入内容。关键在于：每个
• 应包含两个子节点——一个加粗的作者信息（），以及一个普通文本形式的书名（Text Node）。

  以下是优化后的完整实现（含注释和最佳实践）：

  <div id="myDiv"></div>
  <script>
  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 元素并设置 ID
  const myUL = document.createElement("ul");
  myUL.id = "myUL"; // 推荐用 .id 而非 setAttribute，更简洁
  
  // 2. 将 UL 插入目标容器（避免重复查询 DOM）
  const myDiv = document.getElementById("myDiv");
  myDiv.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);
  
    // 按顺序追加子节点：先作者（加粗），后书名（普通文本）
    li.appendChild(authorEl);
    li.appendChild(nameText);
  
    // 将完成的 LI 添加到 UL
    myUL.appendChild(li);
  }
  </script>

  ✅ 关键要点说明：

  

  codingM

  AI智能体协作软件开发平台

  下载
  • 使用 textContent 而非 innerHTML 设置文本内容，防止 XSS 风险且性能更优；
  • 直接操作 .id 属性比 setAttribute("id", ...) 更符合现代 DOM API 规范；
  • 在循环外缓存 document.getElementById("myDiv")，避免重复 DOM 查询；
  • 不要多次调用 document.getElementById("myUL") —— 直接复用已创建的 myUL 引用，提升可读性与性能。

  最终渲染效果完全匹配需求：

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

  • JK Rowling: Harry Potter
  • Suzanne Collins: Hunger Games
  • ……以此类推

  该方案轻量、可维护、语义正确，适用于任何类似的数据驱动列表场景。