JavaScript如何等待动态生成的元素加载到DOM后再执行操作？

方案1：事件委托（最优选择） #

无需等待动态元素生成，直接将事件绑定到页面加载时就已存在的购物车外层固定容器，利用事件冒泡机制捕获内部动态生成按钮的触发事件，性能最优且逻辑最简单。

// 替换为你实际的购物车外层容器选择器，该容器页面初始化时就存在
const cartContainer = document.querySelector('#cart-sidebar')
cartContainer.addEventListener('click', (e) => {
  // 匹配删除按钮，选择器替换为你实际的按钮类名/id
  if (e.target.matches('.cart-item-delete')) {
    // e.target就是当前点击的动态生成按钮
    const currentProductItem = e.target.closest('.cart-item')
    // 此处写删除按钮触发后的业务逻辑
  }
  // 如有其他按钮（比如增减数量）可追加匹配规则
  if (e.target.matches('.cart-count-btn')) {
    // 对应业务逻辑
  }
})

方案2：MutationObserver 监听DOM变化 #

如果需要在元素插入DOM的瞬间执行特殊操作（比如绑定非冒泡事件、修改初始样式等），可以使用原生MutationObserver API监听购物车容器的子节点变化，匹配到目标元素后执行对应操作。

const cartContainer = document.querySelector('#cart-sidebar')
// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 仅处理新增子节点的情况
    if (mutation.type === 'childList' && mutation.addedNodes.length) {
      mutation.addedNodes.forEach(node => {
        // 筛选元素节点，匹配购物车商品项
        if (node.nodeType === Node.ELEMENT_NODE && node.matches('.cart-item')) {
          const targetBtn = node.querySelector('.cart-item-delete')
          if(targetBtn) {
            // 此处绑定事件或执行其他操作
            targetBtn.addEventListener('click', () => {
              // 业务逻辑
            })
          }
        }
      })
    }
  })
})
// 启动监听，配置监听子节点及后代节点变化
observer.observe(cartContainer, { childList: true, subtree: true })
// 不需要监听时可调用 observer.disconnect() 销毁实例释放资源

方案3：渲染逻辑后同步绑定（最直接） #

在你加购后生成商品DOM、插入购物车容器的代码之后，直接同步获取刚生成的元素绑定事件即可，此时元素已经存在于DOM树中，不会返回null。
示例逻辑参考：

// 你的加购渲染逻辑
function renderCartItem(productInfo) {
  // 生成商品DOM结构
  const cartItem = document.createElement('div')
  cartItem.className = 'cart-item'
  cartItem.innerHTML = `
    <div class="cart-product-name">${productInfo.name}</div>
    <div class="cart-product-price">¥${productInfo.price}</div>
    <button class="cart-item-delete">删除</button>
  `
  // 将商品插入购物车容器
  document.querySelector('#cart-sidebar').appendChild(cartItem)
  // 直接获取当前生成的按钮绑定事件，100%能拿到
  const deleteBtn = cartItem.querySelector('.cart-item-delete')
  deleteBtn.addEventListener('click', () => {
    cartItem.remove()
    // 其他删除关联逻辑
  })
}

内容的提问来源于stack exchange，提问作者Andres De Innocentiis