使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。
createTextNode
createTextNode用来创建一个文本节点，用法如下：
var textNode = document.createTextNode("一个TextNode");
createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到HTML文档树中
cloneNode
cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素，使用如下：
var parent = document.getElementById("parentElement"); var parent = parent.cloneNode(true);// 传入true parent.id = "parent";
这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点。
我们看看这个例子
<div> 我是父元素的文本 <br/> <span> 我是子元素 </span> </div> <button>复制</button> var parent = document.getElementById("parent"); document.getElementById("btnCopy").onclick = function(){ var parent = parent.cloneNode(true); parent.id = "parent"; document.body.appendChild(parent); }
这段代码很简单，主要是绑定button事件，事件内容是复制了一个parent，修改其id，然后添加到文档中。
这里有几点要注意：
（1）和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中
（2）如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id
（3）调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同
除此之外，我们还有一个需要注意的点：
如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论：
（1）如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件
（2）如果是内联方式绑定比如
<div></div>
这样的话，副本节点同样会触发事件。
createDocumentFragment
createDocumentFragment方法用来创建一个DocumentFragment。在前面我们说到DocumentFragment表示一种轻量级的文档，
它的作用主要是存储临时的节点用来准备添加到文档中。
createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中，比如示例
<ul></ul> <input type="button" value="添加多项" /> document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); for(var i = ;i < ; i++){ var li = document.createElement("li"); li.textContent = i; list.appendChild(li); } }
这段代码将按钮绑定了一个事件，这个事件创建了100个li节点，然后依次将其添加HTML文档中。这样做有一个缺点：每次一创建一个新的元素，然后添加到文档树中，这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。这个时候，就是使用createDocumentFragment了。
DocumentFragment不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。我们修改上面的代码如下：
document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); var fragment = document.createDocumentFragment(); for(var i = ;i < ; i++){ var li = document.createElement("li"); li.textContent = i; fragment.appendChild(li); } list.appendChild(fragment); }
优化后的代码主要是创建了一个fragment，每次生成的li节点先添加到fragment，最后一次性添加到list，大家可以看示例
创建型API总结
创建型api主要包括createElement，createTextNode，cloneNode和createDocumentFragment四个方法，需要注意下面几点：
（1）它们创建的节点只是一个孤立的节点，要通过appendChild添加到文档中
（2）cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题
（3）使用createDocumentFragment来解决添加大量节点时的性能问题
页面修改型API
前面我们提到创建型api，它们只是创建节点，并没有真正修改到页面内容，而是要调用appendChild来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。
修改页面内容的api主要包括：appendChild，insertBefore，removeChild，replaceChild。
appendChild
appendChild我们在前面已经用到多次，就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下：
parent.appendChild(child);
child节点将会作为parent节点的最后一个子节点。