优化document.createElement的用法？

Question

function fooBar() {
  var creation = document.createElement('div');
  creation.appendChild(document.createElement('div'));
}

所以有一个非常丑陋的场景。我经常遇到一些时刻，我只想通过克隆或其他方式重用其中一种。我不确定我是否过度思考这个但是看起来似乎不对。是否可以优化此代码？

Answer 1

这个怎么样

var creation = document.createElement('div');
creation.innerHTML = "<div></div>";

获取元素

el = creation.querySelector("div");

Answer 2

我不会在评论中继续对话，而只是发布一个答案。

简答：

丝毫没有关系。

更长的答案：

如果通过优化表示执行时间，除非您要创建1000个元素，否则差异无关紧要。如果通过优化你的意思是良好的DRY代码，那么我会说你的整个方法都是错误的：改为使用模板。

可能的模板方法的数量使得枚举超出了本答案的范围，但是从PHP（如果你是如何滚动）到Handlebars到自定义正则表达式替换的任何内容都将完成工作。但是我唯一一次调用document.createElement是为了维护执行顺序的并发脚本引导：有关详细信息，请参阅this。

总而言之，使用可重复使用的模板。如果需要动态创建项目，则使用客户端呈现。对于其他所有内容，请使用服务器端呈现。避免手动创建非常低级别的元素，更喜欢像我建议的更抽象的解决方案。