# 创建节点Api ## document.createElement > 用于创建元素。使用createElement要注意：通过createElement创建的元素并不属于HTML文档，它只是创建出来，并未添加到HTML文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。 > ~~~ let aa = document.createElement('div') aa.id = 'aaaa'; aa.innerText = 'aaaaaaa' let s = document.getElementById('sssss'); s.appendChild(aa); ~~~ ## document.createTextNode > 用于创建文本节点 > ~~~ let aa = document.createTextNode('文本节点') let s = document.getElementById('sssss'); s.appendChild(aa); // <div id="sssss">文本节点</div> ~~~ ## cloneNode 可以传一个参数 true/false true为深度克隆，会复制被克隆的所有子元素，false或者不穿就只会复制该元素。 ~~~ let toClone = document.getElementById('toClone'); let sssss = document.getElementById('sssss'); let cloned = toClone.cloneNode(true); // toClone 为被克隆元素 sssss.appendChild(cloned) ~~~ > 注意： > 如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id。如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论： （1）如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件 （2）如果是内联方式绑定比如 onclick="showParent()"></div>这样的话，副本节点同样会触发事件 ## document.createDocumentFragment Fragment作为文档片段，对他进行dom操作是在内存中进行的，不会造成很大消耗。 ~~~ var fragment = document.createDocumentFragment(); for (var i = 0; i < 1000; i++) { li = document.createElement('li'); li.textContent = '第' + (i + 1) + '个子节点'; fragment.appendChild(li); } ~~~