对于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');
这样同一个段落就会出现两次。