今日在imooc在学习了有关DOM的语法，现在就来总结一下：
JQuery：
1.DOM节点的创建 $("<div id='test' class='aaron'>我是文本节点</div>") 例子：
var $body = $('body');
$body.on('click', function(){ var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>"); $body.append(div); });2.DOM节点的插入
（1）内部插入append()与appendTo()
-
append()前面是要选择的对象，后面是要在对象内插入的元素内容appendTo()前面是要插入的元素内容，而后面是要选择的对象
例子：
$("#bt1").on('click', function(){
$(".content").append('<div class="append">通过append方法添加的元素</div>'); });$("#bt2").on('click', function(){
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content")); });（2）外部插入after()与before()
- after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
- before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
例子：
$("#bt1").on('click', function(){
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>'); });$("#bt2").on('click', function(){
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>'); });（3）内部插入prepend()与prependTo()
例子：
$("#bt1").on('click', function(){
$('.aaron1').prepend('<p>prepend增加的p元素</p>'); });$("#bt2").on('click', function(){
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2')); });区别：
- append()向每个匹配的元素内部追加内容
- prepend()向每个匹配的元素内部前置内容
- appendTo()把所有匹配的元素追加到另一个指定元素的集合中
- prependTo()把所有匹配的元素前置到另一个指定的元素集合中
（4）外部插入insertAfter()与insertBefore()
例子：
$("#bt1").on('click', function(){
$('<p style="color:red">测试insertBefore方法增加</p>','<p style="color:red">多参数</p>').insertBefore($(".test1")); });$("#bt2").on('click', function(){
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2")); });