1. createElement
createElement通过传入标签名创建元素。用法如下:
var div = document.createElement("div");
2. createTextNode
createTextNode用来创建一个文本节点,用法如下:
var textNode = document.createTextNode("这是一个textNode");
createTextNode接收一个参数,这个参数就是文本节点中的文本。
3. cloneNode
cloneNode用来复制调用方法的节点。它接收一个boolean参数,表示是否复制子元素,用法如下:
var parent = document.getElementById("parentElement");
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";
这段代码通过cloneNode复制了一份parent元素,其中cloneNode的参数为true,表示parent的子节点也被复制,如果传入false,则表示只复制了parent节点。
注意:如果被复制的元素有id,则副本也会复制id,由于id的唯一性,复制节点后必须修改其id。
4. createDocumentFragment
createDocumentFragment方法用来创建一个DocumentFragment。DocumentFragment表示一种轻量级的文档,它的作用主要是存储临时的节点用来准备添加到文档中,添加大量节点到文档中时会使用到。
5. 总结
- 以上四种API创建的节点都是孤立的节点,需要使用appendChild添加到文档中;
- cloneNode要注意被复制的节点是否包含子节点以及事件绑定等问题;
- 使用createDocumentFragment来解决添加大量节点时的性能问题。