js DOM节点的创建/插入/复制/删除/替换

创建DOM元素

• **document.createElement ( );**所有的标签都可以使用这种方式来创建。
• **document.createDocumentFragment();**创建一个碎片容器，主要用于直接给body放入多个。
• **document.createTextNode ( );**创建文本节点。
• img 和 canvas 元素可以使用 new 来创建，例如： var img = new Image ( );

var a=document.createElement("a");
var span=document.createElement("span");
var div=document.createElement("div");
var img=document.createElement("img");
var img=new Image();
var con=document.createDocumentFragment();//碎片容器
var txt=document.createTextNode("超链接");//创建文本节点

添加DOM元素到指定位置：

• appendChild ( )：将元素添加到某个元素内部的最后
• insertBefore ( ) :将元素添加到某个元素之前

var div=document.createElement("div");
//在body标签内部的尾部添加div
document.body.appendChild(div);

var span=document.createElement("span");
//将span插入到div标签内部的第一个元素位置
div.insertBefore(span,div.firstChild);

需要注意的是，如果使用 textContent ，会替换掉原来元素内的所有内容。如果需要在元素内部插入文字，可以使用 document.createTextNode ( ) 创建文本节点，再将该节点添加到元素内部。

var a=document.createElement("a");
a.textContent="超链接";
var span=document.createElement("span");
a.appendChild(span);
var txt=document.createTextNode("超链接");//创建文本节点
a.appendChild(txt);
document.body.appendChild(a);

DOM元素的复制

• cloneNode ( ) ，复制节点。
• 参数如果是 true ，表示深复制，表示将当前标签中的所有内容全部复制。
• 参数如果是 false ，表示浅复制，只复制当前元素的标签及属性值。

<div id="div"><span>你好</span></div>
var div=document.getElementById("div");
var div1=div.cloneNode(false);//<div id="div"></div>
var div2=div.cloneNode(true);//<div id="div"><span>你好</span></div>

DOM元素的删除

• remove ( ) ，删除节点
• removeChild ( ) ，删除子节点
• 删除是从DOM树中删除，如果没有将改元素设为null，将会驻留内存。

div.remove();//删除div节点
document.body.removeChild(div);//父容器删除子元素
//删除是从DOM树中删除，如果没有将改元素设为null，将会驻留内存

DOM元素的替换

• replaceChild ( ) ，替换节点
• 父容器.repaceChild(新的元素，要替换的元素)。

var div=document.createElement("div");
var a=document.createElement("a");
document.body.replaceChild(a,div);