表单添加书籍至数组后无法生成对应div的问题求助

问题背景 #

我正在开发一个图书馆应用，用户通过<form>输入书籍数据，输入的值会显示在独立的<div>中。

现有初始化书籍数组：

let myLibrary = [
  {
    title: "The Once and Future King",
    author: "White",
    pages: 654,
  },
  {
    title: "The Hobbit",
    author: "Tolkien",
    pages: 304,
  },
];

初始渲染逻辑 #

借助forEach()方法，数组中的每个对象已能在页面上自动显示：

myLibrary.forEach((book) => {
  const bookContent = document.getElementById("content");
  const addBook = document.createElement("div");
  addBook.className = "book";
  bookContent.appendChild(addBook);
  addBook.innerHTML = `
    <div class="title">
    <p class="bookTitle">
    <span>${book.title}</span>
    </p>
    </div>
    <div class="body">
    <p>
    Author: <span>${book.author}</span>
    </p>
    <p>
    Pages: <span>${book.pages}</span>
    </p>
    </div>`;
});

这段代码会将数组内的每个对象渲染到独立的280x365像素<div>中，书籍标题、作者和页数显示在对应的<p>元素内，布局使用flex实现。

表单提交逻辑 #

设置了<form>让用户输入新书信息并添加到藏书库：

const form = document.getElementById("form");

form.addEventListener("submit", updateLibrary);

function updateLibrary(event) {
  event.preventDefault();

  const title = document.getElementById("title").value;
  const author = document.getElementById("author").value;
  const pages = document.getElementById("pages").value;

  const book = {
    title: title,
    author: author,
    pages: parseInt(pages),
  };
  myLibrary.push(book);
  console.log(myLibrary);
}

遇到的问题 #

填写表单提交后，console.log显示新对象已成功推入数组，但页面并未为新书创建对应的<div>。猜测是forEach未触发新对象的渲染，但找不到修复方法。

已尝试的方法：

• 调整代码顺序，将forEach放在数组下方，updateLibrary函数放在forEach上下方；
• 将forEach放入updateLibrary函数中，虽能生成新div，但出现重复渲染所有书籍的严重bug。

解决方案 #

核心问题是初始的forEach只在页面加载时执行一次，新增书籍后不会自动触发渲染逻辑。我们需要把渲染单个书籍的逻辑抽成独立函数，实现初始化和新增场景的复用：

1. 抽离渲染单个书籍的函数 #

// 提前获取DOM元素，避免重复查询
const bookContent = document.getElementById("content");

function renderBook(book) {
  const addBook = document.createElement("div");
  addBook.className = "book";
  bookContent.appendChild(addBook);
  addBook.innerHTML = `
    <div class="title">
    <p class="bookTitle">
    <span>${book.title}</span>
    </p>
    </div>
    <div class="body">
    <p>
    Author: <span>${book.author}</span>
    </p>
    <p>
    Pages: <span>${book.pages}</span>
    </p>
    </div>`;
}

2. 初始化渲染现有书籍 #

用抽离后的函数替代原来的forEach逻辑：

// 页面加载时渲染所有已有书籍
myLibrary.forEach(renderBook);

3. 修改表单提交函数，新增书籍后直接渲染 #

function updateLibrary(event) {
  event.preventDefault();

  const title = document.getElementById("title").value;
  const author = document.getElementById("author").value;
  const pages = document.getElementById("pages").value;

  const book = {
    title: title,
    author: author,
    pages: parseInt(pages),
  };
  myLibrary.push(book);
  // 只渲染新增的这一本书
  renderBook(book);
  // 可选：清空表单输入，提升用户体验
  form.reset();
}

问题原因说明 #

• 调整代码顺序无效：forEach仅在页面初始化时执行一次，新增书籍后不会自动重新运行；
• 将forEach放入提交函数会重复渲染：每次提交都会遍历整个数组，导致所有已存在的书籍被重复创建，出现大量重复卡片。

额外优化建议 #

• 给书籍卡片添加删除按钮，实现移除书籍的功能；
• 增加表单输入校验，比如限制页数为正整数、标题和作者不能为空；
• 可以给书籍对象添加唯一ID，方便后续的编辑、删除操作定位。

内容的提问来源于stack exchange，提问作者Dagger