添加、删除、替换以及插⼊节点的⽅法
先简单说下每个⽅法对应的语句和⽤法
obj.appendChild(node)  把新的⼦节点添加到指定节点（插⼊新的⼦节点（元素）），这么说可能不是很明⽩，代码可能更清晰
哈！node表⽰的就是要添加的节点。
1// 获取元素
2var ElementById("div1");
3// 创造元素，给元素添加些⽂字
4var ateElement("p");
5    p.innerHTML="添加1";
6var ateElement("p");
7    p1.innerHTML="添加2";
8var ateElement("p");
9    p2.innerHTML="添加3";
10// 添加到div中
11    div.appendChild(p);
12    div.appendChild(p1);
13    div.appendChild(p2);
但是这个⽅法只能在⽗节点的末尾添加元素。那如果我们要在⽗元素的中间添加怎么办呢。w3c⼜提供了⼀个⽅法，就是
obj.insertBefore(node,existingnode)。
obj.insertBefore(node,existingnode)  表⽰的是在指定的已有⼦节点之前插⼊新的⼦节点。node表⽰要添加的节点，existingnode表⽰在其之前插⼊新节点的⼦节点。如果未规定，则 insertBefore ⽅法会在结尾插⼊。
1// 获取元素
2var ElementById("div1");
3// 创造元素，给元素添加些⽂字
4var ateElement("p");
5    p.innerHTML="添加1";
html document是什么6var ateElement("p");
7    p1.innerHTML="添加2";
8var ateElement("p");
9    p2.innerHTML="添加3";
10// 添加到div中
11    div.appendChild(p);
12    div.insertBefore(p1,p);
13    div.insertBefore(p2,p1);
insetBefore()也可以说是插⼊以节点哈！
1var ElementById("div1");
2// 创建元素，给元素添加些⽂字
3var ateElement("p");
4    p.innerHTML="添加1";
5var ateElement("p");
6    p1.innerHTML="添加2";
7var ateElement("p");
8    p2.innerHTML="添加3";
9// 添加到div中
10    div.appendChild(p);
11    div.insertBefore(p1,p);
12    div.insertBefore(p2,p1);
13// 新创建⼀个元素
14var ateElement("span");
15    span.innerHTML="span";
16// 替换第⼀个p
17    placeChild(span,p);
如果被插⼊的元素本⾝还有⼦节点，则那些⼦节点也被插⼊到⽬标节点前。
replaceChild()⽅法也可以⽤⽂档树上的现有节点去替换另⼀个现有节点。代码更能清晰表现出！
1// 获取元素
2var ElementById("div1");
3// 创建元素，给元素添加些⽂字
4var ateElement("p");
5    p.innerHTML="添加1";
6var ateElement("p");
7    p1.innerHTML="添加2";
8var ateElement("p");
9    p2.innerHTML="添加3";
10// 添加到div中
11    div.appendChild(p);
12    div.insertBefore(p1,p);
13    div.insertBefore(p2,p1);
14// 将p2替换为p
15    placeChild(p,p2);
使⽤replaceChild()⽅法的tips：
1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
2. newnode 必须先被建⽴。
removeChild(node)  　删除⼦节点（元素），这个就直接上代码吧！
1// 获取元素
2var ElementById("div1");
3// 创建元素，给元素添加些⽂字
4var ateElement("p");
5    p.innerHTML="添加1";
6var ateElement("p");
7    p1.innerHTML="添加2";
8var ateElement("p");
9    p2.innerHTML="添加3";
10// 添加到div中
11    div.appendChild(p);
12    div.insertBefore(p1,p);
13    div.insertBefore(p2,p1);
14// 删除p1
15    veChild(p1);
知识点⼤概就是这样。没什么难点。不过我在做案例的时候，也碰到了⼀些问题。就是⽗元素的问题，之前做添加信息的案例时，发现如果在table中直接写tr时，然后⽤table当作⽗元素，给⾥⾯添加⾏，会报如下错误。
这是因为table⾥⾯直接写tr，虽然不会报错，但浏览器会给你⽣成⼀个tbody，这样就会导致tr不是table的孩⼦，就会出现这样的错误，所以要注意⽗元素是否写对，其实也可通过⼦选⽗，这样保证了不会出现这样的错误。
在添加元素时也会有这样的问题。
1var ElementsByTagName("div");
2    console.log(odiv);
3var span =ateElement("span");
4    odiv.appendChild(span);
1var ElementsByClassName("bx");
2    console.log(odiv);
3var span =ateElement("span");
4    odiv.appendChild(span);
这两种都会出现下列情况。
但是⽤getElementById和querySelector可以添加成功。
1var odiv=document.querySelector("div");
2var ElementById("main");
3    console.log(odiv);
4var span =ateElement("span");
5    odiv.appendChild(span);
是因为getElementsByClassName等返回的数组，要解析才⾏。
1var ElementsByClassName("bx")[0];
2    console.log(odiv);
3var span =ateElement("span");
4    odiv.appendChild(span);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。