动态添加的按钮无法更改模式

Question

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

更改反应模式数据动态启动模式，在动态按钮上动态添加按钮模式弹出窗口

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

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

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

添加类似于文档的元素。身体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