为什么单击 1 次后此按钮无用？

Question

我想在每次单击按钮时添加一个 div（使用 class="book-card"）（使用 class="add-book-btn"。使用下面的代码，当我第一次单击按钮时，它可以工作。但后来出了点问题，按钮似乎不起作用。

HTML：

<fieldset class="self">
  <legend class="self-title">curently reading</legend>
  <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
</fieldset>

JS：

const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName("add-book-btn");


addBookBtn[0].addEventListener("click", function() {
    selfs[0].innerHTML += `<div class="book-card"></div>`;
    console.log(selfs[0]);
});

Answer 1

使用@Dylan Cadd 的代码并专注于我的元素，它起作用了。但我不明白有什么区别

JS：

const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName("add-book-btn");


addBookBtn[0].addEventListener("click", function() {
    let innerDiv = document.createElement('div');
    innerDiv.className = 'book-card';
    selfs[0].appendChild(innerDiv);
});

Answer 2

试试这个代码：

const selfs = document.getElementsByClassName("self");

function add_card() {
  const addBookBtn = document.getElementsByClassName('add-book-btn');
  addBookBtn[0].addEventListener('click', function(){
    selfs[0].innerHTML += `<div class="book-card"></div>`;
    console.log(selfs[0] );
    
    add_card();
  });
};

add_card();

<fieldset class="self">
  <legend class="self-title">curently reading</legend>
  <button class="add-book-btn">Click</button>
</fieldset>

Answer 3

我找到了适合我的解决方案。我没有编辑innerHTML，而是使用类名动态创建 div 并将其附加到主字段集。

const selfs = document.querySelector(".self");
const addBookBtn = document.querySelector(".add-book-btn");


addBookBtn.addEventListener("click", function() {
    let innerDiv = document.createElement('div');
    innerDiv.className = 'book-card';
    selfs.appendChild(innerDiv);
    console.log(selfs);
});

这个解决方案适合我，如果不适合你请告诉我