在前端开发中，我们通常需要通过 JavaScript 动态地创建 DOM 元素。当我们需要为文档添加多个子元素时，我们可以使用 document.createDocumentFragment() 或 document.createElement() 方法来创建元素。
document.createElement()
document.createElement() 是 DOM API 中用于创建新元素的方法。它接收一个参数，表示要创建的元素的标签名。例如，要创建一个 div 元素，可以使用以下代码：
const div = document.createElement('div');然后，我们可以将这个新创建的元素添加到文档中的某个节点中，例如：
document.body.appendChild(div);
document.createDocumentFragment()
与 document.createElement() 不同，document.createDocumentFragment() 创建的是一个虚拟的 DOM 元素集合，并不会直接渲染到页面上，而是可以在其中动态地添加多个子元素。然后，我们可以将整个 DocumentFragment 添加到文档中的某个节点中。例如：
-- -------------------- ---- ------- ----- -------- - ---------------------------------- --- ---- - - -- - - --- ---- - ----- -- - ----------------------------- -------------- - ----- ------ ------------------------- - ---------------------------------------------------
在上面的示例中，我们首先使用 document.createDocumentFragment() 创建了一个空的 DocumentFragment。然后，在循环中，我们创建了 10 个新的 li 元素，并将它们添加到 DocumentFragment 中。最后，我们将整个 DocumentFragment 添加到页面上的 ul 元素中。
使用场景
通常情况下，如果我们只需要创建几个元素并将它们添加到文档中，那么使用 document.createElement() 就足够了。但是，当我们需要创建大量的元素时，document.createDocumentFragment() 可以帮助我们提高性能。
因为在 DOM 操作中，频繁地插入或删除元素会导致浏览器重绘和重排，从而影响前端性能。而使用 DocumentFragment 可以将多个子元素一次性添加到文档中，从而减少了浏览器对文档的操作次数，提高了前端性能。
总结
在日常开发中，我们应该根据需要选择合适的方法来创建 DOM 元素。如果我们只需要创建少量元素，那么可以使用 document.createElement()。但是，如果我们需要创建大量元素时，建议使用 document.createDocumentFragment() 来优化性能。
示例代码：
-- -------------------- ---- ------- ----- -------- - ---------------------------------- --- ---- - - -- - - ----- ---- - ----- --- - ------------------------------ --------------- - ----- ------ -------------------------- - ------------------------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12239