除了安全之外，使用其他方法还具有一些优点，
createElement而不是修改
innerHTML（而不是仅仅丢弃已有的内容并替换它），例如Pekka已经提到的：
追加元素时保留对DOM元素的现有引用
当您追加（或以其他方式修改）时
innerHTML，必须重新解析和重新创建该元素内的所有DOM节点。如果保存了对节点的任何引用，则它们实际上将是无用的，因为它们不再显示出来了。
保留附加到任何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>
