在前端开发中，我们经常需要将一段 HTML 插入到 DOM 中。但是，有些时候我们并不想直接将 HTML 字符串插入到页面中，而是先对其进行一些处理再插入。
这时候，DocumentFragment 就可以派上用场了。
什么是 DocumentFragment？
DocumentFragment 是一个轻量级的 DOM 节点对象，它可以包含其他的 DOM 节点，但是本身不会被渲染到页面上。
使用 DocumentFragment 对象可以提高 DOM 操作的性能，因为操作 DocumentFragment 不会引起页面的重新渲染，只有将其插入文档树中才会触发重排和重绘。
如何向 DocumentFragment 中插入 HTML？
要向 DocumentFragment 中插入 HTML，我们可以使用 innerHTML 属性或者 insertAdjacentHTML() 方法。
使用 innerHTML
const fragment = document.createDocumentFragment(); fragment.innerHTML = '<p>Hello, world!</p>';
通过将 HTML 字符串赋值给 innerHTML 属性，就可以将 HTML 转换成 DOM 节点，并添加到 DocumentFragment 中。
使用 insertAdjacentHTML()
const fragment = document.createDocumentFragment();
fragment.insertAdjacentHTML('beforeend', '<p>Hello, world!</p>');insertAdjacentHTML() 方法可以在指定位置插入 HTML，其中第一个参数表示插入的位置，可以取值为 beforebegin、afterbegin、beforeend 和 afterend，分别表示在当前节点前插入、在当前节点内部开头插入、在当前节点内部结尾插入和在当前节点后插入。
实例演示
下面是一个实例，演示如何使用 DocumentFragment 将一段 HTML 字符串插入到页面中：
-- -------------------- ---- ------- ----- ------- - ---------- ---------------------- -------------- ------------- ----- -------- - ---------------------------------- -- ------- --- ------ ---- --- --- -- ----- ------- - ------------------------------ ----------------- - -------- -- ----- --- ----- ---------------- - ----- -------------------- - ----------------------------------------- - -- - ---------------- ------ ------------------------------------
上面的代码中，首先创建了一个临时的 div 元素，然后将 HTML 字符串赋值给其 innerHTML 属性，这样就得到了对应的 DOM 节点。接着，通过 appendChild() 方法将这些节点添加到 DocumentFragment 中，最后将 DocumentFragment 插入到页面中。
总结
使用 DocumentFragment 可以提高 DOM 操作的性能，避免页面的重排和重绘。要向 DocumentFragment 中插入 HTML，可以使用 innerHTML 属性或者 insertAdjacentHTML() 方法。在实际开发中，我们可以将多个 DOM 操作封装成一个函数，并使用 DocumentFragment 对象来优化这些操作的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26165