无法重构JavaScript中包含innerHTML的内联脚本

我目前有以下JavaScript代码：

container.innerHTML = `
            <h3 id="box-title"> Build Analysis
             </u><span id="close" class="close" 
            onclick=parentNode.parentNode.style.display='none';>x</span></h3>
             .... /* skipping the rest because it is irrelevant */

应成为：

<span id="things">A thing.</span>

<script nonce="${nonce}">
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('things')
          .addEventListener('click', function doThings() { ... });
});
</script>

一件事。
document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（'things'）
.addEventListener（'click'，函数doThings（）{…}）；
});

但是，在将其应用于我的项目时，它似乎不起作用：

 ...
 </u><span id="close" class="close">x</span></h3>
...

<script>
                document.addEventListener('DOMContentLoaded', function () {
                document.getElementById('close')
                        .addEventListener('click', function closeBox() {
                            parentNode.parentNode.style.display='none';
                        });
                });
    </script>

。。。
x
...
document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（'close'）
.addEventListener（'单击'，函数关闭框（））{
parentNode.parentNode.style.display='none'；
});
});

---

我还尝试在标记中添加一个

onclick=CloseBox（）

。它只是没有注册这个功能，什么也没有发生。甚至没有错误发生。有人能帮忙吗？谢谢大家!

它不起作用的原因是，当您在HTML中有一个

脚本

标记分配给

innerHTML

时，浏览器不会运行该脚本

相反，您应该将代码添加到将其分配给

innerHTML

的代码中：

container.innerHTML = `
    <h3 id="box-title"> <u>Build Analysis
     </u><span id="close" class="close">x</span></h3>
     ....`;
document.getElementById('close')
    .addEventListener('click', function closeBox() {
        this.parentNode.parentNode.style.display='none';
    });

---

内联脚本，这不好

需要引用。@apple对不起，我找不到相关的句子，你是指XSS吗？这里不是这样。非常感谢你提供的信息，我成功了，学到了很多有用的东西！

container.innerHTML = `
    <h3 id="box-title"> <u>Build Analysis
     </u><span id="close" class="close">x</span></h3>
     ....`;
document.getElementById('close')
    .addEventListener('click', function closeBox() {
        this.parentNode.parentNode.style.display='none';
    });