从新创建的 div 创建一个新的 div答案

【问题标题】：Create a new div from the freshly created div从新创建的 div 创建一个新的 div
【发布时间】：2021-12-16 08:01:50
【问题描述】：

我正在尝试在音频结束时创建一个新的 div。它第一次运行良好：新的 div 就像我想要的那样出现。但它不适用于新创建的 div：音频不播放，新的 div 不出现。

我做错了什么？ -_-

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);
});

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);
});

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;

<h1>Empty body</h1>
<button type="button" id="button-1">Play Audio</button>
<audio id="audio-1">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>
<audio id="audio-2">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>

【问题讨论】：

标签： javascript addeventlistener appendchild createelement

【解决方案1】：

您需要在第一个音频结束后获取第二个按钮并将第二个按钮附加到正文。所以下面的代码应该放在第一个音频"ended"事件里面。

var button2 = document.getElementById("button-2");
button2.addEventListener("click", function() {
  audio2.play();
}

结果如下：

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);
  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);
});

  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;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;

<h1>Empty body</h1>
<button type="button" id="button-1">Play Audio</button>
<audio id="audio-1">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>
<audio id="audio-2">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>

【讨论】：