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