对于页面的元素，在DOM编程中可以通过各种查询、修改手段进行管理，非常麻烦。jQuery提供了一整套的方法来处理页面的元素。包括元素的内容、复制、移动和替换等。这里将介绍一些常用的内容。
1.直接获取、编辑内容。
在jQuery中，主要是通过html()和text()两个方法来获取和编辑页面的内容。其中html()相当于获取节点的innerHTML属性，添加参数html(text)，则为设置innerHtml;而text()则用来获取元素的纯文本，text(content)为设置纯文本。
这两种方法有时配合着使用，text()通过用来过滤页面中的标记，而html(text)用来设置节点中的innerHtml。例如：
复制代码 代码如下:
$(function() {
var sString = $("p:first").text(); //获取纯文本
$("p:last").html(sString);
});
利用text()的方法获取第一个P的文本，然后用html()方法赋给最后一个<p>。
text()和html()方法的巧用。
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("p").click(function() {
var sHtmlStr = $(this).html(); //获取innerHTML
$(this).text(sHtmlStr); //将代码做为纯文本传入
});
});
</script>
<p><b>文本</b>段 落<em>示</em>例</p>
鼠标一次点击、二次点击、三次点击这些可以用在代码获取转移上。
2.移动和复制元素
在普通的DOM中，如果希望在某个元素后面添加一个元素，通常是使用父元素的appendChild()或者inserBefore()方法，很多时候需要反复需找节点的位置。十分麻烦，jQuery中提供了append()方法，可以直接为某个元素添加新的子元素。
复制代码 代码如下:
<script type="text/javascript">
$(function() {
//直接添加HTML代码
$("p:last").append("<b>直接添加</b>");
});
</script>
<p>11<em title="huge, gigantic">22</em>...</p>
<p>33<em title="running">44</em>...</p>
除了直接添加html代码，append()方法还可以用来添加固定的节点，例如
复制代码 代码如下:
$("p").append($("a"));
这个情况会有一些不同，倘若添加的<p>是唯一的一个元素，那么$("a")就会被移动到该元素的所有子元素的后面，而如果目标<p>，是多个元素，那么$("a")将会以复制的形式，在每个P中都添加一个子元素，而自身保持不变。例：使用append()方法复制和移动元素。
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("p").append($("a:eq(0)")); //添加目标为多个<p>
$("p:eq(1)").append($("a:eq(1)")); //添加目标是唯一的<p>
})
</script>
<a href="#">链接1</a>
<a href="#">链接2</a>
<p>文字1</p>
<p>文字2</p>
以上代码中设置了两个超链接<a>用于append()调用。对于第1个超链接，添加目标$("p")，一共有两个<p>元素，对于第2个超链接，添加目标是唯一的<p>元素。
可以看到第一个超链接是以复制的形式添加的，第二个超链接则是以移动的方式添加的。
另外从上述可以看出，append()后面的<a>标记被运用了目标<p>的样式风格，同时也是保持了自身的样式风格。这是因为append()是将<a>作为<p>的子标记进行添加的，将<a>放到了<p>的所有子标记（文本）节点后面。
除了append()方法，jQuery还提供了appendTo(target)方法，用来将目标元素添加到指定目标的子元素。它的使用方法和运行结果与append()完全类似。
复制代码 代码如下:
$(function() {
$("img:eq(0)").appendTo($("p")); //添加目标为多个<p>
$("img:eq(1)").appendTo($("p:eq(0)")); //添加目标是唯一的<p>
});
<img src="https://www.jb51.net/article/08.jpg"> <img src="https://www.jb51.net/article/09.jpg">
<hr>
<p><img src="https://www.jb51.net/article/10.jpg"></p>
<p><img src="https://www.jb51.net/article/10.jpg"></p>
<p><img src="https://www.jb51.net/article/10.jpg"></p>
对于第一幅照片，同事将其添加到3个p标记中，对于第二幅图片则把单独添加到1个P元素中，从执行结果可以看出，第一幅图片是以复制的形式添加到3个P元素中的，而第二幅图片是以移动的方式添加的。