点击动态创建的div内按钮无法播放音频、生成新div，问题出在哪？

问题根源 #

你代码的核心问题是动态生成元素的事件绑定时机错误：
页面初始化执行JS时，button-2还没有被插入到DOM中（这个按钮要等第一个音频播放结束、动态插入div后才会生成），此时执行var button2 = document.getElementById("button-2")拿到的是null，给null绑定点击事件不会有任何效果，自然点击按钮没有响应。

另外你提供的CSS代码末尾缺少闭合大括号，会导致样式异常，也建议一并修正。

解决方案 #

把button-2的获取、事件绑定逻辑移动到第一个音频的ended回调内，等按钮被插入DOM后再绑定事件。如果后续还要处理button-3的点击逻辑，也需要遵循同样的规则，在button-3生成后再绑定事件。

修正后的完整代码 #

JS代码

var button = document.getElementById("button-1");
var audio = document.getElementById("audio-1");
var audio2 = document.getElementById("audio-2");
var div = document.createElement('div');
var div2 = document.createElement('div');
var body = document.body;

button.addEventListener("click", function() {
  audio.play();
});

audio.addEventListener("ended", (event) => {
  div.innerHTML = "<h1>First div</h1><button type='button' id='button-2'>Play Audio 2</button>";
  div.classList.add('fullscreen');
  body.appendChild(div);
  // 按钮插入DOM后再获取、绑定事件
  var button2 = document.getElementById("button-2");
  button2.addEventListener("click", function() {
    audio2.play();
  });
});

audio2.addEventListener("ended", (event) => {
  div2.innerHTML = "<h1>Second div</h1><button id='button-3'>Play Audio 3</button>";
  div2.classList.add('fullscreen');
  body.appendChild(div2);
  // 后续button-3的绑定逻辑也写在这里
});

CSS代码

body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.fullscreen {
  width: 100%;
  height: 100%;
  background: darkcyan;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
}

HTML代码无需修改

拓展方案（事件委托） #

如果有大量动态生成的按钮需要绑定事件，可以用事件委托的方式，直接给父元素绑定点击事件，通过判断点击目标的id来执行对应逻辑，不用每次生成新元素都单独绑定：

body.addEventListener('click', function(e) {
  if(e.target.id === 'button-2') {
    audio2.play();
  } else if(e.target.id === 'button-3') {
    // 播放音频3的逻辑
  }
})

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