Javascript 动态添加的按钮可以'；不改变模式

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

我接受了W3school的代码并做了一些调整来测试我的理论，结果让我相信动态创建的按钮无法更改html中的现有元素。

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

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

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

document.createElement（“按钮”）；
document.body.innerHTML+=“xxxxx”；
函数show（）{
警惕（“它到了这里”）；
modal.style.display=“块”；
}

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

---

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

添加这样的元素

document.body.innerHTML+=

会重写整个页面并破坏对“modal”元素的引用

如果您使用

appendChild

来添加按钮元素，它将起作用

var btn=document.createElement（“按钮”）；
btn.textContent=“xxxxx”；
btn.onclick=show；
文件.正文.附件（btn）；
函数show（）{
log（“它到了这里”）；
modal.style.display=“块”；
}

---

嘿，您的代码片段可以工作，但是如果我将第二行改回btn.innerHTML，它也可以工作，所以我想主要部分是appendChild部分。在我自己的代码中，这就是我的格式。我使用for循环动态添加了许多div，每个div都包含一个添加了appendChild的按钮。单击任何按钮都应该显示模式，但这些按钮都不起作用。这是我感到困惑的部分。如果不显示您的代码，我就不知道您出了什么问题