Question

我正在尝试创建一个元素（没有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");
}

但是如果稍后我也使用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;

我听说innerHTML给已经创建的元素带来了问题，这应该通过追加子节点来完成，但是那些太大而无法正常管理。

Answer 1

不要使用innerHTML，它会删除之前绑定到元素的所有事件处理程序。您可以使用insertAdjacentHTML方法来保存事件：

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);

另一个解决方案是使用appendChild方法手动追加新元素，但这更详细：

var div = document.createElement('div');
div.innerHTML = dato;
document.getElementById('generos').appendChild(div);

Answer 2

你可以insertAdjacentHTML()，它的作用相似，但不会破坏现有的元素：

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

innerHTML的工作方式基本上是：

将所有HTML内容作为字符串
追加新字符串
将结果作为内容写回元素

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

JavaScript创建元素然后添加一个事件

2 个答案: