本文讲解如何使用纯 javascript（不依赖框架）将书籍信息对象数组转换为结构清晰的 html 无序列表，其中每位作者名以 `` 标签加粗显示，并与书名按指定格式组合。
在前端开发中，动态生成列表是常见需求。你已成功创建了
- 元素并遍历了对象数组，但当前代码仅插入了空
- 标签，尚未填充内容。要实现目标格式（如 **JK Rowling**: Harry Potter），关键在于：为每个列表项分别创建语义化子元素，并按顺序拼接内容。
以下是优化后的完整实现方案：
<div id="myDiv"></div>
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）开销（本例虽小，但属良好实践）。
? 进阶提示： 若后续需支持点击编辑、删除或响应式交互，可为每个
- 添加 data-index 属性或 dataset，便于事件委托精准定位对应数据项。
立即学习“Java免费学习笔记（深入）”；
这样生成的 HTML 结构语义清晰、样式可控，且完全符合现代原生 JavaScript 最佳实践。
