将输入字段中的新值添加到 div，同时将旧输入保留在前一个 div 中

Question

我希望能够从输入字段中提取值并将其添加到创建的 div 中，每次创建新的 div 时，它将采用新值，同时保留旧值。现在，新值会覆盖所有其他值。

如果你看到我的例子；加号将一本书添加到书架上，然后提交输入字段应该添加一个标题。但是，添加后续书籍后，之前的标题将被覆盖。

我感谢任何帮助。

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

function addBook() {

  const book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);

}

addBookBtn.addEventListener('click', function() {
  addBook();
});

submitFormBtn.addEventListener('click', function(e) {
  e.preventDefault();
  var title = document.getElementById('booktitle').value;
  var book = document.querySelectorAll('.book')
  for (let b = 0; b < book.length; b++) {
    book[b].textContent = title;
  }

});

#shelf {
  height: 150px;
  border-bottom: 5px solid #000;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25px, 40px));
  align-items: end;
}

.book {
  border: 1px solid #000;
  height: 100px;
  width: 25px;
  display: inline-block;
}

<div id="bookshelf">

  <div id="shelf"></div>

</div>

<button id="add-book">+</button>

<form>

  <label for="booktitle">Book Title</label><br>
  <input type="text" id="booktitle" name="booktitle"><br>

  <input type="submit" id="submitform" value="Submit">

</form>

Answer 1

不要将标题循环添加到 div 中。使用全局变量来保存要添加标题的书籍的索引。每次提交时，您都会向该书添加标题并增加索引。

const shelf         = document.getElementById('shelf');
const addBookBtn    = document.getElementById('add-book');
const submitFormBtn = document.getElementById('submitform');
let book_index = 0;

function addBook() {

  const book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);

}

addBookBtn.addEventListener('click', function() {
  addBook();
});

submitFormBtn.addEventListener('click', function(e) {
  e.preventDefault();
  var title = document.getElementById('booktitle').value;
  var book = document.querySelectorAll('.book')
  if (book_index < book.length) {
    book[book_index++].textContent = title;
  } else {
    alert("You need to add another book first");
  }
});

#shelf {
  height: 150px;
  border-bottom: 5px solid #000;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25px, 40px));
  align-items: end;
}

.book {
  border: 1px solid #000;
  height: 100px;
  width: 25px;
  display: inline-block;
}

<div id="bookshelf">

  <div id="shelf"></div>

</div>

<button id="add-book">+</button>

<form>

  <label for="booktitle">Book Title</label><br>
  <input type="text" id="booktitle" name="booktitle"><br>

  <input type="submit" id="submitform" value="Submit">

</form>