首页 > 代码库 > jQuery节点操作方法大全
jQuery节点操作方法大全
1.append()
向每个匹配的元素内部追加内容
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘p‘).append(‘<b>你好</b>‘);
结果：
<p>我想说：<b>你好</b></p>
2.appendTo()
将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规$(A).append(B)的操作，既不是将B追加到A中，而是将A追加到B中
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘<b>你好</b>‘).appendTo(‘p‘);
结果：
<p>我想说：<b>你好</b></p>
3.prepend()
向每个匹配的元素内部前置内容
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘p‘).prepend(‘<b>你好</b>‘);
结果：
<p><b>你好</b>我想说：</p>
4.prependTo()
将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规$(A).prepend(B)的操作，既不是将B前置到A中，而是将A前置到B中
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘<b>你好</b>‘).prependTo(‘p‘);
结果：
<p><b>你好</b>我想说：</p>
5.after()
在每个匹配的元素之后插入内容
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘p‘).after(‘<b>你好</b>‘);
结果：
<p>我想说：<b>你好</b></p>
6.insertAfter
将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规$(A).after(B)的操作，既不是将B插入到A后面，而是将A插入到B后面
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘<b>你好</b>‘).insertAfter(‘p‘);
结果：
<p>我想说：<b>你好</b></p>
7.before
在每个匹配的元素之前插入内容
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘p‘).before(‘<b>你好</b>‘);
结果：
<p><b>你好</b>我想说：</p>
8.insertBefore
将所有匹配的元素插入到指定元素的前面。实际上，使用该方法是颠倒了常规$(A).after(B)的操作，既不是将B插入到A前面，而是将A插入到B前面
HTML代码：
<p>我想说:</p>
jQuery代码:
$(‘<b>你好</b>‘).insertBefore(‘p‘);
结果：
<p><b>你好</b>我想说：</p>
9.remove()
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素
注意！ 当某个节点用remove()方法删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
实例：
var $li=$(‘ul li:eq(1)‘).remove();//获取第二个<li>元素节点后，将它从网页中删除
$li.appendTo(‘ul‘);//把刚才删除的节点又重新添加到<ul>元素里
另外remove()方法也可以通过传递参数来选择性的删除元素
实例：
$(‘ul li‘).remove(‘li[title!=菠萝]‘);//将<li>元素中属性title不等于‘菠萝’的<li>元素删除
10.empty()
严格来讲，empty()方法不是删除节点，而是清空节点，他能清空元素中的所有后代节点
实例：
$(‘ul li:eq(1)‘).empty();//获得第二个<li>元素节点后，清空此元素里的内容，注意是元素里！
当代码运行后，第二个<li>元素的内容被清空了，只剩下了<li>标签默认符号‘·’
11.clone()
实例:
$(‘ul li‘).click(function(){
$(this).clone().appendTo(‘ul‘);//复制当前节点，并将它追加到<ul>元素中
})
注意！ 复制节点后，被复制的新元素并不具备任何行为。如果需要新元素也具有行为，使用clone时传递参数true。
实例：
$(this).clone(true).appendTo(‘ul‘);
12.replaceWith()和replaceAll()
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。
实例:
$(‘p‘).replaceWith(‘<strong>你最不喜欢的方法是？</strong>‘);
同样上述功能也能使用relaceAll()来实现，该方法与relaceWith()方法的作用相同，只是颠倒了relaceWith()操作。
实例：
$(‘<strong>你最不喜欢的方法是？</strong>‘).replaceAll(‘p‘);
注意！ 如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在元素上重新绑定事件。
13.wrap()
将某个节点用其他标记包裹起来。该方法对于需要在文档中插入额外标记的结构化标记非常有用，而且她不会破坏原始文档的语义。
jQuery代码：
$(‘strong‘).wrap(‘<b></b>‘);//用<b>标签把<strong>元素包裹起来
结果：
<b><strong title=‘你最不喜欢的方法是‘>你最喜欢的方法是?</strong></b>
14.wrapAll()
将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。
HTML代码：
<strong title=‘方法‘>方法</strong>
<strong title=‘方法‘>方法</strong>
<ul>
<li title=‘方法一‘>方法一</li>
<li title=‘方法二‘>方法二</li>
<li title=‘方法三‘>方法三</li>
</ul>
如果使用wrap()方法包裹<strong>元素
jQuery代码：
$(‘strong‘).wrap(‘<b></b>‘);
结果:
<b><strong title=‘方法‘>方法</strong></b>
<b><strong title=‘方法‘>方法</strong></b>
如果使用wrapAll()方法包裹<strong>元素
jQuery代码：
$(‘strong‘).wrapAll(‘<b></b>‘);
结果：
<b>
<strong title=‘方法‘>方法</strong>
<strong title=‘方法‘>方法</strong>
</b>
15.wrapInner()
将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
jQuery代码：
$(‘strong‘).wrapInner(‘<b></b>‘);
结果：
<strong title=‘喜欢的方法‘><b>喜欢的方法</b></strong>
jQuery节点操作方法大全