相同点

  • 他们在创建时都不会造成文档的回流，因为在被挂载在 dom 之前都没有与dody上的DOM发生关系

不同点

  • createElement 创建节点需要传入 tag 名 createElement(‘li’)
  • createDocumentFragment 在创建碎片文档，将碎片文档添加到dom文档后，这个碎片文档之前添加的节点都被送给了 真实的dom ```javascript let frag = document.createDocumentFragment()

frag.appendChild(document.createElement(‘ul’)) //

    frag.appendChild(document.createElement(‘div’)) //
    frag.appendChild(document.createElement(‘li’)) //

  • frag.childNodes NodeList(3) [ul, div, li]

    document.body.appendChild(frag)

    frag.childNodes NodeList [] ``` 所以 createDocumentFragment 是用来暂存节点的，处理完了好送给 真实的dom
    而 createElement 就是 创建真实节点的作用

    image.png