在下面的示例代码中,我将onclick事件处理程序附加到包含文本"foo"的span.处理程序是一个匿名函数,弹出alert().
但是,如果我分配给父节点alert(),则此innerHTML事件处理程序将被销毁 - 单击"foo"将无法弹出警告框.
这可以解决吗？
<html>
<head>
<script type="text/javascript">
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";
}
</script>
</head>
<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan">foo</span>
</div>
</body>
</html>
在实践中,使用createElement而不是innerHTML有什么好处？我问,因为我确信使用innerHTML在性能和代码可读性/可维护性方面更有效但我的团队成员已经决定使用createElement作为编码方法.我只是想了解createElement如何更有效率.
我正在研究一个问题,需要为一组~100个元素中的每个元素创建一个复杂的div块.
除了内容之外,每个单独的元素都是相同的,它们看起来(在HTML中)是这样的:
<div class="class0 class1 class3">
<div class="spacer"></div>
<div id="content">content</div>
<div class="spacer"></div>
<div id="content2">content2</div>
<div class="class4">content3</div>
<div class="spacer"></div>
<div id="footer">content3</div>
</div>
我可以:
1)innerHTML使用字符串连接创建所有元素以添加内容.
2)使用createElement,setAttribute并appendChild创建和添加每个div.
选项1获取稍微小一点的文件可供下载,但选项2的渲染速度似乎稍快.
除了表演之外还有一个很好的理由通过一条路线或另一条路线？我应该测试的任何跨浏览器问题/性能问题？
...或者我应该尝试模板和克隆方法？
非常感谢.