创建新的节点并添加到现有的节点树上

Posted 2020-07-28

创建一个新的元素节点：

var node = document.createElement( ‘标签名‘ ) ;  //此时此元素只存在于内存中

创建一个新的文本节点：

var txt = document.createTextNode( ‘文本内容‘ ) ;

创建一个文档片段对象：

var fragment = document.createDocumentFragment( );

文档片段对象：它本身不对应任何html标签，作用类似于一块透明胶布(本质就是内存中的一块空间)，可以容纳其他的节点对象，把需要添加到DOM树上的所有节点先暂时添加到一个文档片段中，最后把这个文档片段一次性的添加到DOM树上，只需要浏览器重新绘制整个页面一次即可，从而防止多次绘制页面造成的“频闪”问题。

 可以使用下述方法把刚创建的节点插入到指定的位置：

    parentNode.appendChild( child );        //把child追加为parentNode的最后一个子节点

    parentNode.insertBefore( newChild,  existingChild );   //在父节点中当前的existingChild之前添加一个新子节点newChild