本文主要总结了jQuery中DOM节点的插入方法，以及各种方法的注意点，下面话不多说，来看看详细的介绍吧。
一、内部插入append()与appendTo()
- append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
- appendTo：实际上，使用这个方法是颠倒了常规的
$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
append()和appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同，append()前面是要选择的对象，后面是要在对象内插入的元素内容，appendTo()前面是要插入的元素内容，而后面是要选择的对象。
rush:js;">
$("#bt1").on('click',function() {
//.append(),选择表达式在
函数的前面，
//参数是将要插入的
内容。
$(".content").append('
')
})
$("#bt2").on('click',function() {
//.appendTo()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素
').appendTo($(".content"))
})
rush:js;">
$("#bt1").on('click',function() {
//找到class="aaron1"的div节点,然后通过prepend在内部的首位置
添加一个新的p节点
$('.aaron1').prepend('
prepend增加的p元素
')
})
$("#bt2").on('click',function() {
//找到class="aaron2"的div节点,然后通过prependTo内部的首位置
添加一个新的p节点
$('
prependTo增加的p元素
').prependTo($('.aaron2'))
})
rush:js;">
$("#bt1").on('click',function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('
增加
','
多参数
')
})
$("#bt2").on('click',function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('
增加
','
多参数
')
})
rush:js;">
$("#bt1").on('click',function() {
//在test1元素前后插入集合中每个匹配的元素,
不支持多参数
$('
方法增加
','
多参数
').insertBefore($(".test1"))
})
$("#bt2").on('click',function() {
//在test2元素前后插入集合中每个匹配的元素,不支持多参数
$('<p style="color:red">测试insertAfter方法增加
','<p style="color:red">
多参数').insertAfter($(".test2"))
})
