- append()方法:
- prepend()方法:
- appendTo()方法:
- prependTo()方法:
- after()方法:
- before()方法:
- insertBefore()方法:
- insertAfter()方法:
添加节点的jquery方法:
-
append()
-
prepend()
-
appendTo()
-
prependTo()
插入节点的jquery方法:
-
after()
-
before()
-
insertBefore()
-
insertAfter()
举个例子来说明以上几种方法的用法:
html例子:
<nav>
<ul>
<li>序列号1</li>
<li>序列号2</li>
<li>序列号3</li>
</ul>
</nav>
添加节点
append()方法:
var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容底部
prepend()方法:
var $div = '<div>prepend添加的节点</div>';
$('nav').prepend($div); //将新创建的div节点插入到nav容器的内容顶部
appendTo()方法:
var $div = '<div>append添加的节点</div>';
var nav = $('nav');
//$div.appendTo($nav); //这样写是错误的
$('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容后面
prependTo()方法:
var $div = '<div>append添加的节点</div>';
var nav = $('nav');
//$div.prependTo($nav); //和前面同理,这样写是错误的
$('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容的前面
插入节点
after()方法:
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。
before()方法:
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。
insertBefore()方法:
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前面
insertAfter()方法:
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后面