js创建dom节点和优化

先列举常用的几种方式：

createElement() 创建一个元素节点 => 接收参数为string类型的nodename

createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容

createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称

createComment() 创建一个注释节点 => 接收参数为string类型的注释文本

除了这几个，还有一个常常会被我们忽略createDocumentFragment方法，它是用来创建虚拟的节点对象，或者说是碎片节点。

createDocumentFragment

DocumentFragment节点不属于节点树，继承的parentNode属性总是null，当我们要把DocumentFragment节点插入文档树时，插入不是他本身，而是他所有的子孙节点。

createDocumentFragment带来的性能优化

当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。