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

Question

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

动态更改反应模式数据带有动态添加按钮的启动模式动态按钮上的模式弹出

我采用了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 +=元素会重写整个页面，并破坏对"；模态"；元件

如果您使用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