添加、删除、替换以及插入节点的方法

添加节点

obj.appendChild(node)

1. 把新的子节点添加到指定节点，node表示的就是要添加的节点。

2. 只能在父节点的末尾添加元素。

// 获取元素
    var div=document.getElementById("div1");
    // 创造元素，给元素添加些文字
    var p=document.createElement("p");
    p.innerHTML="添加1";
    var p1=document.createElement("p");
    p1.innerHTML="添加2";
    var p2=document.createElement("p");
    p2.innerHTML="添加3";
    // 添加到div中
    div.appendChild(p);
    div.appendChild(p1);
    div.appendChild(p2);

删除节点

removeChild(node)

1. 删除子节点（元素）

2. 如果在table中直接写tr时，然后用table当作父元素，给里面添加行，会报如下错误。因为table里面直接写tr，虽然不会报错，但浏览器会给你生成一个tbody，这样就会导致tr不是table的孩子，就会出现这样的错误，所以要注意父元素是否写对，其实也可通过子选父，这样保证了不会出现这样的错误。

3. 在添加元素时也会有这样的问题。

// 获取元素
    var div=document.getElementById("div1");
    // 创建元素，给元素添加些文字
    var p=document.createElement("p");
    p.innerHTML="添加1";
    var p1=document.createElement("p");
    p1.innerHTML="添加2";
    var p2=document.createElement("p");
    p2.innerHTML="添加3";
    // 添加到div中
    div.appendChild(p);
    div.insertBefore(p1,p);
    div.insertBefore(p2,p1);
    // 删除p1
    div.removeChild(p1);

Authors

John

Luke

替换节点

obj.replaceChild(newnode,oldnode)

1. 用新节点替换某个子节点。oldnode节点必须是obj元素子节点，他的返回值是一个指向已经被替换的那个子节点的引用指针。

var div=document.getElementById("div1");
    // 创建元素，给元素添加些文字
    var p=document.createElement("p");
    p.innerHTML="添加1";
    var p1=document.createElement("p");
    p1.innerHTML="添加2";
    var p2=document.createElement("p");
    p2.innerHTML="添加3";
    // 添加到div中
    div.appendChild(p);
    div.insertBefore(p1,p);
    div.insertBefore(p2,p1);
    // 新创建一个元素
    var span=document.createElement("span");
    span.innerHTML="span";
    // 替换第一个p
    div.replaceChild(span,p);

replaceChild()方法也可以用文档树上的现有节点去替换另一个现有节点

代码如下：

// 获取元素
    var div=document.getElementById("div1");
    // 创建元素，给元素添加些文字
    var p=document.createElement("p");
    p.innerHTML="添加1";
    var p1=document.createElement("p");
    p1.innerHTML="添加2";
    var p2=document.createElement("p");
    p2.innerHTML="添加3";
    // 添加到div中
    div.appendChild(p);
    div.insertBefore(p1,p);
    div.insertBefore(p2,p1);
    // 将p2替换为p
    div.replaceChild(p,p2);

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

插入节点

obj.insertBefore(node,existingnode)

1. 在指定的已有子节点之前插入新的子节点。node表示要添加的节点，existingnode表示在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入。

// 获取元素
    var div=document.getElementById("div1");
    // 创造元素，给元素添加些文字
    var p=document.createElement("p");
    p.innerHTML="添加1";
    var p1=document.createElement("p");
    p1.innerHTML="添加2";
    var p2=document.createElement("p");
    p2.innerHTML="添加3";
    // 添加到div中
    div.appendChild(p);
    div.insertBefore(p1,p);
    div.insertBefore(p2,p1);