在实践中,相比于innerHTML,使用createElement有什么优势?我之所以问是因为,我坚信使用innerHTML在性能和代码可读性/可维护性方面会更加有效,但是我的团队成员已经决定使用createElement作为编码方法。我只是想了解createElement如何更有效。
除了安全之外,使用其他方法还具有一些优点,createElement而不是修改innerHTML(而不是仅仅丢弃已有的内容并替换它),例如Pekka已经提到的:
createElement
innerHTML
当您追加(或以其他方式修改)时innerHTML,必须重新解析和重新创建该元素内的所有DOM节点。如果保存了对节点的任何引用,则它们实际上将是无用的,因为它们不再显示出来了。
这实际上只是最后一个的特例(尽管很常见)。设置innerHTML不会自动将事件处理程序重新附加到它创建的新元素上,因此您必须自己跟踪它们并手动添加它们。在某些情况下,事件委托可以消除此问题。
如果您要进行大量添加操作,则绝对不希望继续进行重置,innerHTML因为尽管对于简单的更改来说速度更快,但是反复重新解析和创建元素会更慢。解决该问题的方法是在字符串中构建HTML,并innerHTML在完成后设置一次。根据情况的不同,字符串操作可能比仅创建元素和附加元素要慢。
此外,字符串操作代码可能更复杂(特别是如果您希望它是安全的)。
这是我有时使用的功能,它使使用起来更加方便createElement。
function isArray(a) { return Object.prototype.toString.call(a) === "[object Array]"; } function make(desc) { if (!isArray(desc)) { return make.call(this, Array.prototype.slice.call(arguments)); } var name = desc[0]; var attributes = desc[1]; var el = document.createElement(name); var start = 1; if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) { for (var attr in attributes) { el[attr] = attributes[attr]; } start = 2; } for (var i = start; i < desc.length; i++) { if (isArray(desc[i])) { el.appendChild(make(desc[i])); } else { el.appendChild(document.createTextNode(desc[i])); } } return el; }
如果您这样称呼它:
make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);
您将获得与此HTML等效的代码:
<p>Here is a <a href="http://www.google.com/">link</a>.</p>