使用Node.cloneNode：
var container = document.getElementById('container');
var prototype = document.createElement('div');
prototype.innerHTML = "<p>Adding some <strong>arbitrary</strong> HTML in"
+" here just to illustrate.</p> <p>Some <span>nesting</span> too.</p>"
+"<p>CloneNode doesn't care how the initial nodes are created.</p>";
var prototype_copy = prototype.cloneNode(true);
prototype_copy.id = 'whatever'; //note--must be an Element!
container.appendChild(prototype_copy);
速度提示
您要最小化三个操作：
字符串解析
当您使用innerHTML. innerHTML单独使用时速度很快。由于所有这些 DOM 方法调用的开销，它通常比等效的手动 DOM 构造更快。但是，您不想使用innerHTML内部循环，并且不想将其用于追加。 随着元素的内容变得越来越大element.innerHTML += 'more html'，特别是具有灾难性的运行时行为。它还会破坏任何事件或数据绑定，因为所有这些节点都被破坏并重新创建。
因此innerHTML，为方便起见，请使用创建“原型”节点，但对于内部循环，请使用 DOM 操作。要克隆您的原型，请使用prototype.cloneNode(true)which 不会调用解析器。（请注意克隆原型中的 id 属性——当您将它们附加到文档时，您需要确保它们是唯一的！）
文档树修改（重复appendChild调用）
每次修改文档树时，您可能会触发文档窗口的重绘并更新文档 DOM 节点关系，这可能会很慢。相反，将您的追加分批成 aDocumentFragment并仅将其追加到文档 DOM 一次。
节点查找
如果您已经有一个内存中的原型对象并想要修改它的片段，那么无论您使用 DOM 遍历、getElement*. 还是querySelector*.
通过在创建原型时保留对要修改的节点的引用，将这些搜索排除在您的内部循环之外。然后，每当您想要克隆原型的几乎相同副本时，修改您已经引用的节点，然后克隆修改后的原型。
示例模板对象
最重要的是，这是一个基本的（可能是快速的）模板对象，说明了使用cloneNode和缓存节点引用（减少了字符串解析和节点查找的使用）。
为它提供一个带有类名和data-attr="slotname attributename"属性的“原型”节点（或字符串）。类名成为文本内容替换的“槽”；元素data-attr成为属性名称设置/替换的插槽。然后，您可以为该render()方法提供一个对象，其中包含您定义的槽的新值，并且您将获得完成替换的节点的克隆。
示例用法在底部。
function Template(proto) {
if (typeof proto === 'string') {
this.proto = this.fromString(proto);
} else {
this.proto = proto.cloneNode(true);
}
this.slots = this.findSlots(this.proto);
}
Template.prototype.fromString = function(str) {
var d = document.createDocumentFragment();
var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
d.appendChild(temp.firstChild);
}
return d;
};
Template.prototype.findSlots = function(proto) {
// textContent slots
var slots = {};
var tokens = /^\s*(\w+)\s+(\w+)\s*$/;
var classes = proto.querySelectorAll('[class]');
Array.prototype.forEach.call(classes, function(e) {
var command = ['setText', e];
Array.prototype.forEach.call(e.classList, function(c) {
slots[c] = command;
});
});
var attributes = proto.querySelectorAll('[data-attr]');
Array.prototype.forEach.call(attributes, function(e) {
var matches = e.getAttribute('data-attr').match(tokens);
if (matches) {
slots[matches[1]] = ['setAttr', e, matches[2]];
}
e.removeAttribute('data-attr');
});
return slots;
};
Template.prototype.render = function(data) {
Object.getOwnPropertyNames(data).forEach(function(name) {
var cmd = this.slots[name];
if (cmd) {
this[cmd[0]].apply(this, cmd.slice(1).concat(data[name]));
}
}, this);
return this.proto.cloneNode(true);
};
Template.prototype.setText = (function() {
var d = document.createElement('div');
var txtprop = (d.textContent === '') ? 'textContent' : 'innerText';
d = null;
return function(elem, val) {
elem[txtprop] = val;
};
}());
Template.prototype.setAttr = function(elem, attrname, val) {
elem.setAttribute(attrname, val);
};
var tpl = new Template('<p data-attr="cloneid id">This is clone number <span class="clonenumber">one</span>!</p>');
var tpl_data = {
cloneid: 0,
clonenumber: 0
};
var df = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
tpl_data.cloneid = 'id' + i;
tpl_data.clonenumber = i;
df.appendChild(tpl.render(tpl_data));
}
document.body.appendChild(df);