Joh*_* Mc 2 html javascript onclick onclicklistener
我知道有很多关于此的主题，但它们解决了一些可变问题。我的要简单得多，但它不起作用。只工作一次。
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.innerHTML += '<div>welcome</div>';
}<body>
<button id="bt1">Click me</button>
</body>我尝试将clicked函数放入和取出onclick语句（如其他一些主题所建议的那样）。
我还尝试移动bt1变量声明（并且根本不使用变量）。
每当您分配给innerHTML容器的 时（即使您只是与现有的 HTML 连接），容器的内容将被删除，新innerHTML 字符串将被解析，然后由浏览器呈现。因此，曾经附加到容器内任何内容的侦听器将不再起作用。
const container = document.querySelector('#container');
const child = container.children[0];
// Before: the child's parent is the `container`, as expected:
console.log(child.parentElement);
container.innerHTML += '';
// After: the child has no parent element!
// If a listener was attached to the child before,
// the child will no longer even be in the document!
console.log(child.parentElement);<div id="container">
<div>child</div>
</div>对于您正在执行的操作，请使用insertAdjacentHTML，它不会损坏侦听器，但会执行与以下类似的功能innerHTML +=：
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');
}<body>
<button id="bt1">Click me</button>
</body>或者，显式创建要追加的新元素，然后使用appendChild：
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
const div = document.createElement('div');
div.textContent = 'welcome';
document.body.appendChild(div);
}<body>
<button id="bt1">Click me</button>
</body>