动态添加的按钮不能改变模态

Question

首先我要声明，我已经搜索并发现了许多与此类似的其他问题，但我发现的所有问题都使用 jquery、bootstrap、react 等...，而我只想要一个简单的 HTML/ CSS/JS 解决方案。

Change react-modal data dynamically launch modal with dynamically added button Modal Popup on Dynamic Button

我拿了 W3school 的代码并做了一些调整来测试我的理论，结果让我相信动态创建的按钮不能改变 html 中的现有元素。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

我在代码中动态添加了一个简单的按钮并将其放在 jsfiddle 上。

document.createElement("button");
document.body.innerHTML += "<button onclick = show()>xxxxx</button>";

function show() {
    alert("it went here");
    modal.style.display = "block";
}

https://jsfiddle.net/IWannaDance/sg4nb6e5/1/

我知道 javascript，但我不确定为什么我无法使用我的按钮更改模式。类似问题的其他答案说的是事件侦听器，我不确定它与此有何关系。对此的解释和解决方法将不胜感激。

编辑：这只是我用来测试的一个示例，而我的实际 javascript 代码使用 for 循环来创建格式相同的 div，并且每个 div 都有一个动态添加的按钮，所有添加的都是 appendChild。如果我在我的 html 文档中创建一个名为 modal 的 div，并尝试在 javascript 中更改它的属性，它似乎不起作用。但是，如果我通过单击按钮创建一个新模式，它会显示。我想这将是我的临时解决方法，直到我找到更好的方法。

Answer 1

添加这样的元素document.body.innerHTML += 会重写整个页面并破坏对“modal”元素的引用

如果您使用appendChild 代替添加按钮元素，它将起作用

var btn = document.createElement("button");
btn.textContent = "xxxxx";
btn.onclick = show;
document.body.appendChild(btn);

function show() {
  console.log("it went here");
  modal.style.display = "block";
}

JSFiddle