jQuery之DOM节点插入总结

添加节点的jquery方法：

append()、prepend()、appendTo() 、prependTo() 

插入节点的jquery方法：

after() 、before() 、insertBefore() 、insertAfter()

举个例子来说明以上几种方法的用法：

html例子:

    

        
序列号1
        
序列号2
        
序列号3
    

添加节点

1、append()方法：

script:
var $div = '
append添加的节点
';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容底部

html：

    

        
序列号1
        
序列号2
        
序列号3
    
    
append添加的节点

2、prepend()方法：

script:
var $div = '
append添加的节点
';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容顶部

html：

    
prepend添加的节点
    

        
序列号1
        
序列号2
        
序列号3
    

3、appendTo()方法：

script:
var $div = '
append添加的节点
';
var nav = $('nav');
//$div.appendTo($nav);  //这样写是错误的

$('
append添加的节点
').appendTo($nav);//真理在这里。。  将新创建的节点添加到nav的内容后面

html：

    

        
序列号1
        
序列号2
        
序列号3
    
    
appendTo添加的节点

4、prependTo()方法：

script:
var $div = '
append添加的节点
';
var nav = $('nav');
//$div.prependTo($nav);  //和前面同理，这样写是错误的 
$('
append添加的节点
').appendTo($nav);//真理在这里。。  将新创建的节点添加到nav的内容的前面

html：

    
prependTo添加的节点
    

        
序列号1
        
序列号2
        
序列号3
    

插入节点

5、after()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_2.after($l_1);  //这里可以这么理解，第2个li后面跟着第1个li。

html：

    

        
序列号2
        
序列号1
        
序列号3
    

6、before()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_1.before($l_2);  //这里可以这么理解，第1个li前面是第2个li。

html：

    

        
序列号2
        
序列号1
        
序列号3
    

7、insertBefore()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_2.insertBefore($l_1);  //将第2个li插入到第1个li前面

html：

    

        
序列号2
        
序列号1
        
序列号3
    

8、insertAfter()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_1.insertAfter($l_2);  //将第1个li插入到第2个li后面

html：

    

        
序列号2
        
序列号1
        
序列号3
    

容易出现问题的地方在 appendTo()和preappendTo()。