JQuery之dom文档操作

jQuery之文档处理操作

jQuery的文档处理其实就是dom操作，不外乎四个字"增" "删" "改" "查"，但是却比原生的要简单得多，特别实用，大家不妨可以试试。

文档处理操作一共分六大类

一.内部插入

1.append

2.appendTo

3.prepend

4.prependTo

html代码

I would like to say:

jQuery代码

//向每个匹配的元素内部追加内容。
$("p").append("Hello");

//把所有匹配的元素追加到另一个指定的元素元素集合中。
$("p").appendTo("div");

//向每个匹配的元素内部前置内容。
$("p").prepend("Hello");

//把所有匹配的元素前置到另一个、指定的元素元素集合中。
$("p").prependTo("class");

二.外部插入

1.after

2.before

3.insertAfter

4.insertBefore

html代码

I would like to say:

Hello

Hello

cruel

World

jQuery代码

//在每个匹配的元素之后插入内容。
$("p").after("Hello");

//在每个匹配的元素之前插入内容。
$("p").before("Hello");

//把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
$("p").insertAfter("#foo");

//把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
$("p").insertBefore("#foo");

三.包裹

1.wrap

2.unwrap

3.wrapAll

4.wrapInner

hHTML代码

I would like to say:

Hello

jQuery代码

//把所有匹配的元素用其他元素的结构化标记包裹起来。
$("p").wrap("

");

//这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
$("p").unwrap()

//将所有匹配的元素用单个元素包裹起来
$("p").wrapAll("

");

//将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$("p").wrapInner("");
$("p").insertBefore("#foo");

四.替换

1.replaceWith

2.replaceAll

hHTML代码

Hello

cruel

World

jQuery代码

//将所有匹配的元素替换成指定的HTML或DOM元素。
$("p").replaceWith("Paragraph. ");

//用匹配的元素替换掉所有 selector匹配到的元素。
$("Paragraph. ").replaceAll("p");

五.删除

1.empty()

2.remove

3.detach

hHTML代码

Hello, Person and person

jQuery代码

//删除匹配的元素集合中所有的子节点。
$("p").empty();

//从DOM中删除所有匹配的元素。
$("p").remove();

//从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("p").detach();

六.克隆

1.clone

hHTML代码

Hello

, how are you?

jQuery代码

//克隆匹配的DOM元素并且选中这些克隆的副本。
$("b").clone().prependTo("p");

上面这些代码大家直接用就可以查看效果，希望对大家有所帮助。