html例子:
<nav><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul>
</nav>

script:
var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容底部html：
<nav><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul><div>append添加的节点</div>
</nav>

script:
var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容顶部html：
<nav><div>prepend添加的节点</div><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul>
</nav>

script:
var $div = '<div>append添加的节点</div>';
var nav = $('nav');
//$div.appendTo($nav);  //这样写是错误的$('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。  将新创建的节点添加到nav的内容后面html：
<nav><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul><div>appendTo添加的节点</div>
</nav>

script:
var $div = '<div>append添加的节点</div>';
var nav = $('nav');
//$div.prependTo($nav);  //和前面同理，这样写是错误的
$('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。  将新创建的节点添加到nav的内容的前面html：
<nav><div>prependTo添加的节点</div><ul><li>序列号1</li><li>序列号2</li><li>序列号3</li></ul>
</nav>

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：
<nav><ul><li>序列号2</li><li>序列号1</li><li>序列号3</li></ul>
</nav>

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：
<nav><ul><li>序列号2</li><li>序列号1</li><li>序列号3</li></ul>
</nav>

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：
<nav><ul><li>序列号2</li><li>序列号1</li><li>序列号3</li></ul>
</nav>

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：
<nav><ul><li>序列号2</li><li>序列号1</li><li>序列号3</li></ul>
</nav>