JavaScript创建元素，然后将其添加为事件

我正在尝试创建一个元素（没有DOM或jQ pls），然后将其应用到一个均匀的。。。新创建的元素正确显示，javascript工作正常

var dato = "";
    dato += "<div id='todas'>";
    dato += "<img src=/logos/todos_generos.jpg>";
    dato += "<span>Todas</span>";
    dato += "</div>";

    document.getElementById('generos').innerHTML += dato;
    document.getElementById("todas").onclick = myFunction;


function myFunction(){
alert("This is not working");
}

var dato=”“；
dato+=”；
dato+=”；
dato+=“Todas”；
dato+=”；
document.getElementById（'Granos'）.innerHTML+=dato；
document.getElementById（“todas”）.onclick=myFunction；
函数myFunction（）{
警报（“这不起作用”）；
}

但是如果以后我也使用innerHTML添加另一个元素，那么前面的元素JS将停止工作：

var dato = "";
    dato += "<div id='someRandom'>";
    dato += "<img src=/logos/todos_generos.jpg>";
    dato += "<span>Todas</span>";
    dato += "</div>";

    document.getElementById('generos').innerHTML += dato;
    document.getElementById("todas").onclick = myFunction;

var dato=”“；
dato+=”；
dato+=”；
dato+=“Todas”；
dato+=”；
document.getElementById（'Granos'）.innerHTML+=dato；
document.getElementById（“todas”）.onclick=myFunction；

---

我听说innerHTML给已经创建的元素带来了问题，这应该通过添加child来完成，但这太大了，无法正确管理

不要使用

innerHTML

，它会删除以前绑定到元素的所有事件处理程序。您可以使用将保留事件的方法：

var dato = "";
    dato += "<div id='someRandom'>";
    dato += "<img src=/logos/todos_generos.jpg>";
    dato += "<span>Todas</span>";
    dato += "</div>";

document.getElementById('generos').insertAdjacentHTML('beforeend', dato);

您可以这样做，其工作原理类似，但不会破坏现有元素：

document.getElementById('generos').insertAdjacentHTML( 'beforeend', dato );

innerHTML

的工作方式基本上是：

• 以字符串形式获取所有HTML内容
• 附加新字符串
• 将结果作为内容写回元素

---

将现有元素转换回文本时，显然会丢失所有分配的事件处理程序。

为什么要对innerHTML执行

+=

？在这一点上你没有添加任何东西。只是一个提示，如果你想避免在处理新创建元素的事件时遇到麻烦，请阅读。

document.getElementById('generos').insertAdjacentHTML( 'beforeend', dato );