实现输入框值添加到新创建div，保留旧div内容不被覆盖

问题根源 #

你的提交按钮事件逻辑里，用document.querySelectorAll('.book')选中了所有书籍元素，然后通过循环把每本书的textContent都替换成新输入的标题——这就是所有旧书籍标题被覆盖的原因。

解决方案 #

我们需要调整提交逻辑，只给最新添加的空白书籍设置标题，而非修改全部书籍。以下是修改后的完整代码：

修正后的JavaScript代码 #

const shelf         = document.getElementById('shelf');
const addBookBtn    = document.getElementById('add-book');
const submitFormBtn = document.getElementById('submitform');
const bookTitleInput = document.getElementById('booktitle');

function addBook() {
  const book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);
}

addBookBtn.addEventListener('click', addBook);

submitFormBtn.addEventListener('click', function(e) {
  e.preventDefault();
  
  const title = bookTitleInput.value.trim();
  if (!title) return; // 空标题不处理
  
  // 获取所有书籍，取最后一个（最新添加的空白书）
  const books = document.querySelectorAll('.book');
  const lastBook = books[books.length - 1];
  
  // 仅给无标题的新书设置内容
  if (lastBook && !lastBook.textContent) {
    lastBook.textContent = title;
    bookTitleInput.value = ''; // 清空输入框方便下次输入
  }
});

代码说明 #

• 移除了循环修改所有书籍的逻辑，改为仅操作最后一个书籍元素
• 增加空值判断，避免提交无效的空标题
• 设置标题后自动清空输入框，优化操作流程
• 增加判断条件：只有当最后一本书没有标题时才赋值，防止重复修改同一本书的内容

扩展方案（可选） #

如果需要支持“修改指定书籍标题”的功能，可以给每本书添加编辑按钮，点击后填充输入框，提交时修改对应书籍的内容：

function addBook(title = '') {
  const book = document.createElement('div');
  book.classList.add('book');
  book.textContent = title;
  
  // 添加编辑按钮
  const editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  editBtn.style.marginLeft = '5px';
  editBtn.addEventListener('click', () => {
    bookTitleInput.value = book.textContent;
    window.currentEditingBook = book; // 标记当前编辑的书籍
  });
  
  book.appendChild(editBtn);
  shelf.appendChild(book);
}

submitFormBtn.addEventListener('click', function(e) {
  e.preventDefault();
  
  const title = bookTitleInput.value.trim();
  if (!title) return;
  
  if (window.currentEditingBook) {
    // 修改已有书籍标题
    window.currentEditingBook.textContent = title;
    window.currentEditingBook = null;
  } else {
    // 直接添加带标题的新书
    addBook(title);
  }
  
  bookTitleInput.value = '';
});

这个方案既支持直接输入标题添加新书，也支持编辑已有书籍的标题，操作更灵活。

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