请教一个jquery动态添加div排序的问题

请教一个jquery动态添加div排序的问题

插入节点的jquery方法： after() 、before() 、insertBefore() 、insertAfter()
举个例子来说明以上几种方法的用法：
html例子:

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

html：


2、prepend()方法：
script:
var $div = '';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容顶部

html：


3、appendTo()方法：
script:
var $div = '';
var nav = $('nav'); //$div.appendTo($nav); //这样写是错误的 $('').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容后面

html：


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

html：


插入节点
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：


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：


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：


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：

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

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息