先列举常用的几种方式:
createElement() 创建一个元素节点 => 接收参数为string类型的nodename
createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容
createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称
createComment() 创建一个注释节点 => 接收参数为string类型的注释文本
除了这几个,还有一个常常会被我们忽略createDocumentFragment方法,它是用来创建虚拟的节点对象,或者说是碎片节点。
createDocumentFragment
DocumentFragment节点不属于节点树,继承的parentNode属性总是null,当我们要把DocumentFragment节点插入文档树时,插入不是他本身,而是他所有的子孙节点。
createDocumentFragment带来的性能优化
当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,再统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升。
还有一个很重要的特性是,如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。