本文通过实际代码示例对比了JavaScript中createElement与innerHTML两种创建DOM元素的方式。测试结果显示，在大量节点创建场景下，innerHTML具有显著的性能优势，而createElement虽然语义更清晰但执行效率较低。开发者应根据具体需求选择合适的DOM操作策略以优化页面加载速度。
createElement方法测试
首先考察使用createElement方法动态创建DOM元素的情况。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
innerHTML方法测试
接着观察使用innerHTML属性插入HTML字符串的方式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
1
23下一页阅读全文