细说 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/