原生JavaScript：动态生成的start按钮如何绑定对应div内p元素

nth-child(4)方案是否可行 #

完全不可行，核心原因有两个：

• nth-child()是CSS选择器语法，仅能传入querySelector()、querySelectorAll()这类DOM查询方法作为参数使用。event.target是原生DOM元素对象，本身不存在nth-child实例方法，你写的event.target.nth-child(4)执行时会直接抛出语法/类型错误。
• 每个动态生成的div内仅包含start按钮、stop按钮、p元素共3个子节点，就算元素顺序固定不变，p元素也只会是第3个子节点，不可能匹配到第4位。而且靠子元素序号定位的逻辑极度脆弱，只要后续调整div内部的元素顺序、新增其他节点，代码会直接失效。

正确实现方案 #

优先用事件委托实现，只需要在静态的外层容器（包裹所有动态div的父节点，没有专门容器就直接绑在body上）绑定一次点击事件即可，不需要每次生成新div时重复绑定监听，性能更好也不容易出内存泄漏问题。
核心逻辑是：点击start按钮时，先向上找到按钮所属的父div，再从这个div范围内查询对应的p元素，完全不需要依赖元素序号。

参考代码 #

// 假设所有动态生成的div都放在class为dynamic-wrap的静态外层容器中
const wrap = document.querySelector('.dynamic-wrap')

wrap.addEventListener('click', function(e) {
  // 匹配点击的是start按钮（给start按钮统一加class="start-btn"标识）
  if (e.target.matches('.start-btn')) {
    // 找到按钮最近的父div，也就是当前按钮所属的容器
    const currentBox = e.target.closest('div')
    // 在当前容器范围内查询p元素，不会找到其他div里的p
    const targetP = currentBox.querySelector('p')
    // timer存在当前div的自定义属性上，避免全局变量被多个计时器覆盖
    currentBox.timer = setInterval(() => {
      // 把对应的p元素传入计时逻辑即可
      startTimer(targetP)
    }, 1000)
  }

  // stop按钮逻辑可以一起实现
  if (e.target.matches('.stop-btn')) {
    const currentBox = e.target.closest('div')
    clearInterval(currentBox.timer)
  }
})

如果你更习惯在创建div的时候直接给按钮绑定事件，利用JS闭包的特性直接持有当前div内p元素的引用即可，不需要额外查询：

const createBtn = document.querySelector('#create')
const wrap = document.querySelector('.dynamic-wrap')

createBtn.addEventListener('click', () => {
  // 创建新div和内部元素
  const box = document.createElement('div')
  const startBtn = document.createElement('button')
  startBtn.className = 'start-btn'
  startBtn.textContent = 'start'
  const stopBtn = document.createElement('button')
  stopBtn.className = 'stop-btn'
  stopBtn.textContent = 'stop'
  const p = document.createElement('p')

  // 绑定事件时直接用当前作用域下的p引用，就是所属div的p元素
  startBtn.addEventListener('click', () => {
    box.timer = setInterval(() => {
      startTimer(p)
    }, 1000)
  })
  stopBtn.addEventListener('click', () => {
    clearInterval(box.timer)
  })

  // 拼接元素插入页面
  box.append(startBtn, stopBtn, p)
  wrap.append(box)
})

注意事项 #

• 不要把timer存为全局变量，多个动态div的计时器会互相覆盖，导致后续无法准确停止指定div的计时，存在对应div的自定义属性上是最简单的方案。
• 用closest()查找父容器、在容器范围内查找目标元素的写法兼容性好，也不会因为内部元素顺序调整失效，比序号选择稳定得多。

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