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

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

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

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

  ✅ 关键要点说明：

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

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

  

  WeShop唯象

  WeShop唯象是国内首款AI商拍工具，专注电商产品图片的智能生成。

  下载

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

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

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

https://www.php.cn/faq/2026636.html