细说 jQuery DOM操作篇（二） – DOM 树操作
我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jquery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。
创建元素
我们可以通过 $() 函数来直接创建元素，例如
$('<span>new</span>');
但仅仅创建了元素，还没有插入到页面中来，接下来介绍插入方法。
插入元素
最基本的四种插入方法如下：
1.insertBefore 指定元素外部，前面
2.insertAfter 指定元素外部，后面
3.prependTo 指定元素内部，前面
4.appendTo 指定元素内部，后面
假设现有元素为一个 div，如下：
<div>origin</div>
将上例中的 span 插入到 div 内部的前面，可以这样操作：
$('<span>new</span>').prependTo('div');
结果为：
<div><span>new</span>origin</div>
反向插入元素
我们也可以反向插入元素，对应的方法为：
1.insertBefore - before
2.insertAfter - after
3.prependTo - prepend
4.appendTo - append
对于上例，使用反向插入元素的方法为：
$('div').prepend('<span>new</span>');
结果是一致的。
移动元素
对于已经存在的元素使用上述的四类方法，则起到移动元素的效果，假设 span 元素已经存在在 div 内部如下：
<div><span>new</span>origin</div>
我们尝试将 span 移至 div 外部的后面，如下：
$('span').insertAfter('div');
移动后的效果为：
包裹元素
包裹元素即给元素添加一个外层元素，假设现在有两个 span 如下：
<span>A</span>
<span>B</span>
我们希望给每个 span 都包裹一个 li，从而实现列表化，此时我们可以使用 wrap 方法:
$('span').wrap('<li></li>');
结果为：
如果我们希望用一个 ul 包裹所有 span 元素，那么可以使用 wrapAll 方法：
$('span').wrapAll('<ul></ul>').wrap('<li></li>');
克隆元素
克隆元素的方法为 clone，使用起来很简单，但是这里有一点需要注意，克隆元素时，绑定在该元素极其后代元素的事件是否也会被克隆呢，默认情况下是不会的，但是我们可以将其设置为同时克隆。举例如下：
<span>clone</span>
<div></div>
绑定点击事件给 span：
$('span').click(function() {
alert('hello');//
});
克隆 span 并插入到 div 内部：
$('span').clone().appendTo('div');
但此时点击新建的 span 并不能触发 alert，因为 clone 方法默认未将绑定的事件克隆，为了达到事件克隆的效果，只需要将参数设置为 true 即可。
$('span').clone(true).appendTo('div');
此时，点击新建的 span 将会触发 alert。
获取、设置元素内容
假设有 div 如下：
<div><span>content</span></div>
我们希望获取 div 元素的内容，可以使用 html 方法。
$('div').html()
返回结果为："<span>content</span>"。
我们也可以使用 text 方法：
$('div').text()
返回结果为："content"。
所以很明显，html 方法和 text 方法的区别在于 text 方法只获取纯文本内容，所以 HTML 标签都将被忽略。
设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容：
$('div').text('new content')
html 方法同理。
参考
http://book.douban.com/subject/24669823/
您可能感兴趣的文章：
jQuery源码分析系列
细说 jQuery 元素篇（一） – 理解 DOM
细说 jQuery DOM操作篇（一） – 属性操作
细说 jQuery DOM操作篇（二） – DOM 树操作
解密jQuery内核 DOM操作的核心函数domManip
jQuery学习笔记[1] jQuery中的DOM操作
细说 jQuery 元素篇（二） – 选择符
jQuery对象和DOM对象使用说明
细说 jQuery 事件篇（二） – 处理简单事件
jQuery的运行机制和设计理念分析