js和jq动态添加、删除节点的方法汇总
96 youfrweb
0.1 2017.09.29 17:12* 字数 556 阅读 793评论 0喜欢 3
使用的时候总是容易查一下、试一下，今天想要自己总结一下，要是不确定直接来看看。
刚说完要自己写，结果就看到了更好的总结，所以我就加上自己的理解做了部分修改，不要嫌弃我呀~
一：原生js操作节点
1、appendChild();添加
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加
使用方式：父级节点.appendChild( 要添加的节点 )
兼容性：所有浏览器都支持此方法
JS代码：
<body>
<div id="box">
<p></p>
<i></i>
</div>
</body>
<script>
var oBox = document.getElementById("box");
var oSpan = document.createElement("span");//添加元素节点
// var oText = document.createTextNode("文字节点");//添加文字节点
oBox.appendChild(oSpan);
</script>
效果图：
image.png
2、insertBefore()添加
概念：把要插入的节点添加到指定父级里面的指定节点之前，改变父级即可添加兄弟节点。
使用方式：父级节点.insertBefore( 要插入的节点，指定节点 )
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在
JS代码：
image.png
3、removechild() 删除
概念：删除指定的子节点
指定元素的父级.removechild(指定子节点)
<body>
<div id="box">
<p id="p"></p>
<i></i>
</div>
</body>
<script>
var oBox = document.getElementById("box");
var oP = document.getElementById("p");//可以不用获取div，直接获取oP的父级（oP.parentNode）
oBox.removeChild(oP);
</script>
二、jQuery中操作节点
1、添加
第一组：before() & insertBefore()
第二组：after() & insertAfter()
第三组：prepend() & prependTo()
第四组：append() & appendTo()
接下来就是代码加说明：
<body>
<div id="box">
<p id="p"></p>
<i id="i"></i>
</div>
</body>
<script>
var oSpan = $("<span></span>");
//before()在指定节点的前面添加要添加的节点 - 指定节点.before( 要添加的节点 )
$("#p").before(oSpan);
//insertBefore()把要插入节点插入到指定节点的前面 - 要插入的节点.insertBefore( 指定节点 )
oSpan.insertBefore($("#p"));
//after()把要添加的节点添加到指定节点的后面 - 指定节点.after( 要添加的节点 )
$("#p").after(oSpan);
//insertAfter()把要插入的节点插入到指定节点的后面 - 要插入的节点.insertAfter( 指定节点 )
oSpan.insertAfter($("#p"));
//prepend()在指定父级里面的最前面添加指定节点 - 父级节点.prepend( 要添加的节点 )
$("#box").prepend(oSpan);
//prependTo()把指定节点添加到指定父级里面的最前面 - 要添加的节点.prependTo( 父级节点 )
oSpan.prependTo($("#box"));
//append()等同于原生JS的appendChild方法,在指定父级里面的最后面添加指定节点 - 父级节点.append( 要添加的节点 )
$("#box").append(oSpan);
//appendTo()把指定节点添加到指定父级里面的最后面 - 要添加的节点.appendTo( 父级节点 )
oSpan.appendTo($("#box"));
</script>
每一组的结果都一样，没有什么区别，但是主体不同，接下来想要直接链式添加功能，作用的对象就不一样了，这个注意一下就行了。就基本所有的浏览器都兼容。
借鉴：http://www.cnblogs.com/rentianyuan/p/4767113.html
2、删除
remove() - 方法删除被选元素及其子元素。obj.remove();obj也会被删除
empty() - 方法删除被选元素的子元素。obj.empty();obj不会被删除
