js-DOM常用操作-节点创建型API js-DOM常用操作-节点创建型API

节点创建型API

创建元素createElement

var div = creatElement('div');

参数：字符串，要创建的标签名；
返回新创建的元素节点；

创建文本节点createTextNode

var textNode = createTextNode(data);

参数：字符串；
返回新创建的文本节点；

克隆节点cloneNode

var copyNode = node.cloneNode(deep);

【js-DOM常用操作-节点创建型API】参数：布尔值，true代表属性和后代都拷贝，而false只拷贝该节点及其属性；
返回新克隆后的节点；

createDocumentFragment

var fragment = document.createDocumentFragment();

DocumentFragment不属于文档树，暂时存放一些将要一次性插入文档的节点，常用于“文档片段优化法”。
例如，想要为一个添加100个，如果每次循环都创建节点并添加的话会很耗性能。所以可以用DocumentFragment解决这个问题，每次创建好的节点先放到DocumentFragment里，最后一次性把DocumentFragment里存放的100个节点添加到里。

var list = document.getElementsByTagName('ul')[0]; var fragment = document.createDocumentFragment(); for(var i=0; i<100; i++){ var li = document.creaetElement('li'); fragment.appendChild(li); } list.appendChild(fragment);