如何向div追加HTML同时保证事件监听器正常工作？

我猜你遇到的大概率是动态添加的.close按钮点击事件不生效的问题吧？这在操作动态DOM元素时简直是高频踩坑点～

先说说问题根源：你通过insertAdjacentHTML插入的.close按钮是页面加载完成后才生成的，如果之前你是直接给静态元素绑定事件（比如document.querySelector('.close').addEventListener(...)），那代码执行时这个按钮根本不存在，自然绑定不上。

下面给你两种靠谱的解决方案：

方案1：插入后立即绑定事件 #

每次插入HTML后，直接获取刚生成的按钮并绑定事件，适合只需要插入少数元素的场景：

// 用ES6模板字符串重构你的HTML拼接（可读性拉满！）
const map_div = `
<div class="maps">
  <h2>View marker <button class="close" data-what="maps">[ close ]</button></h2>
  <div class="the-contents" id="mapDiv${link_id}"></div>
</div>
`;

// 插入HTML到目标容器
const targetContainer = document.getElementById(`listing${link_id}`);
targetContainer.insertAdjacentHTML('beforeend', map_div );

// 给刚插入的关闭按钮绑定点击事件
const closeBtn = targetContainer.querySelector('.close:last-child');
closeBtn.addEventListener('click', function() {
  // 移除整个地图容器
  this.closest('.maps').remove();
  // 如果有地图实例，记得在这里销毁避免内存泄漏
});

方案2：事件委托（更推荐） #

如果需要多次动态插入这类元素，事件委托是最优解——把事件绑定到已经存在的父元素（甚至document）上，利用事件冒泡来捕获动态元素的点击：

// 页面加载完成后只需要绑定一次，后续所有动态添加的.close按钮都生效
document.addEventListener('click', function(e) {
  // 精准匹配目标元素：带close类且data-what为maps的按钮
  if (e.target.classList.contains('close') && e.target.dataset.what === 'maps') {
    // 找到最近的.maps父容器并移除
    e.target.closest('.maps').remove();
    // 这里可以添加其他逻辑，比如清空地图数据、重置状态等
  }
});

// 你的插入代码保持不变（同样建议用模板字符串重构）
const map_div = `
<div class="maps">
  <h2>View marker <button class="close" data-what="maps">[ close ]</button></h2>
  <div class="the-contents" id="mapDiv${link_id}"></div>
</div>
`;
document.getElementById(`listing${link_id}`).insertAdjacentHTML('beforeend', map_div );

额外提一句：用ES6的模板字符串替代字符串拼接真的能大幅提升代码可读性，再也不用跟一堆+和转义字符较劲了，强烈建议改用这种写法！

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