为什么class为add-book-btn的按钮点击一次后无法新增book-card元素？

当你使用selfs[0].innerHTML += '<div class="book-card"></div>'追加内容时，浏览器的执行逻辑是：

1. 读取.self元素当前所有内部HTML的字符串内容
2. 拼接上新的HTML片段
3. 清空.self内部所有已存在的DOM节点
4. 把拼接好的完整HTML字符串重新解析为新的DOM节点，替换掉.self原来的内部内容

原来绑定了点击事件的.add-book-btn属于被清空的旧DOM节点，新渲染出来的同class按钮没有绑定任何点击事件，因此第一次点击后按钮就无法触发新增逻辑了。

方案1：使用appendChild追加元素（推荐） #

不修改原有DOM结构，直接创建新元素追加到父容器末尾，不会影响原有节点的事件绑定：

const selfContainer = document.querySelector('.self');
const addBookBtn = document.querySelector('.add-book-btn');

addBookBtn.addEventListener('click', function() {
    const newBookCard = document.createElement('div');
    newBookCard.className = 'book-card';
    selfContainer.appendChild(newBookCard);
});

方案2：使用事件委托 #

把点击事件绑定到不会被销毁的父容器上，匹配触发目标，就算后续按钮被替换也能正常触发逻辑：

document.querySelector('.self').addEventListener('click', function(e) {
    // 兼容点击到按钮内部i标签的场景
    if (e.target.closest('.add-book-btn')) {
        const newBookCard = document.createElement('div');
        newBookCard.className = 'book-card';
        this.appendChild(newBookCard);
    }
});

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