jQuery中DOM操作方法的简单总结

对于jQuery提供的大量的DOM操作方法，应该根据要完成的任务和元素的位置做出不同的选择，这里先列举一些常见的DOM操作方法。

1。要在HTML中创建新元素，使用$()函数。
例如：

$('<a href = "#top"> back to top </a>');$('<a id = "top"></a>');

第一行创建了一个back to top 的链接，第二行则创建了一个作为目标的锚。
2。要在每个匹配的元素中插入新元素，使用：
①. .append();
②. .appendTo();
③. .prepend();
④. .prependTo();

.append() 与 .appendTo()
都是在现有元素内部、之后 添加内容

 $("<p>Hello World</p>").appendTo("#container"); $("#container").append("<p>Hello World</p>");

.prepend() 和 .prependTo()
都是在现有元素内部、之前添加内容

 $("<p>Hello World</p>").prependTo("#container"); $("#container").prepend("<p>Hello World</p>");

如果执行以下代码

$(document).ready(function(){   $("<p>prependTo Hello World1</p>")   .prependTo("#container");    $("#container").prepend("<p> prepend Hello  World2</p>");    $("<p>Hello World1</p>").appendTo("#container");    $("#container").append("<p>Hello World2</p>");    });

同样都是向container中添加元素，结果如下

上面代码说明了.prepend() 和 .prependTo()添加内容时，向目标元素中倒序插入内容，就相当于每一个插入的元素直接跟在被插入元素的后面。

3。要在每个匹配元素相邻的位置上插入新元素，使用：
①. .after()
②. .insertAfter()
③. .before()
④. .insertBefore()

.after()与 .insertAfter() 和 .append() 与 .appendTo()用法一样，只不过这两个方法添加的内容在container之外。如执行

    $("<p>prependTo Hello World1</p>").insertAfter("#container");    $("#container").after("<p>Hello World2</p>");

解释器解释的实际代码为

.before() 和 .insertBefore()
都是在现有元素外部、之前添加内容

 $("<p> Hello World 1</p>").insertBefore("#container"); $("#container").before("<p>Hello World 2</p>");

解释器解释的实际代码为

4。 要在每个匹配元素的外部插入新元素。使用
①. .wrap()
将匹配元素包裹

        $("#container").wrap("<ol></ol>");

解析为：

②. .wrapAll()

<div id = "main"><div class = "container"></div><div class = "container"></div><div class = "container"></div><div class = "container"></div> </div>

$("#main .container").wrapAll("<ol id = 'note'></ol>").wrap("< li >< /li>");

将会用ol包裹整个class为container的块，然后用li包裹每一个container

解析为：

③. .wrapInner()

5。要用新元素或文本替换每个匹配的元素
①. .html()
②. .text()
③. .repalceWith()

6。要移除每个匹配元素中的元素
.empty()

7。从文档中移除每个匹配元素及其后代，但不实际删除它们
①. .remove()
②. .detach()

8。复制元素
.clone()

$( 'div.chapter p:eq(1)' ).clone().insertBefore(' div . chapter');

这样同一个段落就会出现两次。