DOM增删改替换 - 码农教程

一、在创建元素的时候为什么要把创建元素到也页面写到后面？

要求：创建一个div,在div中创建10个span.

var div = document.createElement("div");
//document.body.appendChild(div);


for(var i=0;i<10;i++){
    var span = document.creatElement("span");
        div.appendChild(span);
}
document.body.appendChild(div);

原因是如果写在前面就创建一个span 就要打开一次body,div写入，这样的效率太慢啦。但是如果先讲span 在内存中直接写入，这样就打开2次，这样一次行就节省了很多的效率。

先创建一个容器，将子元素，放到父容器中，最后讲父容器放到页面中。

如果一定要写入到body页面中。就用碎片容器。

//创建碎片容器：
var elem = document.createDocumentFragment();
for(var i =0;i<10;i++){
var div = document.creatElement("div");
}
document.body.appendChile(elem);

二、删除元素三部曲

//元素删除的时候应该先删除事件，在删除元素。因为纯粹的删除的元素只是从Dom书中删除，并没有删除内容。删除元素的步骤：

第一步：删除事件

第二步：删除元素

第三步：将元素设为null

var div = document.createElement("div");
var span = document.createElement("span");
span.addEventListener("click",clickHandler);

div.appendChild(span);
document.body.appendChild(div);
function clickHandler(e){
    span.textContent="欢迎";
}
//删除之前的将事件删除
span.removeEventListener("click",clickHandler);
//使用onclick事件的时候,删除方法删除事件
//span.onclick=null

//删除元素
div.removeChild(span);
span=null;

div.appendChild(span);
//此时的span不再是节点，是null,再添加的时候就会报错

三、替换元素：

父容器.removeChild(新元素，要替换掉的旧元素)

四、复制元素：

源元素.cloneNode(deep)

deep 是深度的意思；

true：时是深度赋值，将子元素和内容一起赋值，源元素的属性复制

false: 是潜复制，将源元素和属性复制

注意：

如果使用 cloneNode 复制元素的时候，必须修改元素的 id .

原文地址：https://www.cnblogs.com/anne-jia/p/11841010.html