使用jQuery进行DOM操作详解编程语言

1、在元素内部插入DOM元素
插入到页面元素之后的方法：
append(content)向所有匹配元素的内部添加内容
如：$(“#second”).append($(“#first”)); 将fist的内容添加到second上面
appendTo()将匹配的元素追加到内容所指的那个元素之内，这里匹配的元素是追加对象，参数为被追加对象。
如：$(“#first”).appendTo(“#second”); 将fist的内容添加到second上面
插入到页面元素之前的方法
prepend(content)向所有匹配元素的内部前置内容
如：$(“#second”).prepend($(“#first”)); 将fist的内容前置到到second上面
prependTo()将匹配的元素前置到内容所指的那个元素之内，这里匹配的元素是前置对象，参数为被前置对象。
如：$(“#first”).prependTo(“#second”); 将fist的内容前置到second上面

2、在元素外部插入DOM元素
after(content) 在每个匹配的元素之后插入内容
$(“#second”).after(“<b>测试after的使用</b>”);在匹配的元素之后
insertAfter(content) $(“#first”).insertAfter(“#second”); 将fist的内容插入到到second元素后面
before(content) 在每个匹配的元素之前插入内容
insertBefore(content) $(“#first”).insertBefore(“#second”); 将fist的内容插入到到second元素前面

3、包裹DOM元素
使用指定的元素标记进行包裹
处理元素包裹的核心函数是wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来,一个一个分别包裹

.test{ 
color:white; 
background-color:#CD5C5C; 
} 
.wrap{ 
background-color:green; 
}

调用方式：p#second”).warp($(“.test”))
wrapAll(elem) 将所有匹配的元素用单个元素包裹起来，匹配的元素作为整体进行包裹

使用HTML标记进行包裹
warp(html) 把所有匹配的元素用其他元素的结构化标记包裹起来，一个一个分别包裹
warpAll(selector) 将所有匹配的元素用单个元素包裹起来

包裹内部元素
warpInner(content) 将每个匹配元素的的子内容(包括文本节点)用DOM元素或者一个HTML结构包裹起来
调用方式：$(“p”).wrapInner(“<b> </b>”);
              $(“p#second”).warpInner($(“div.test”));

4、替换DOM元素
replaceAll(selector) 用替换的元素替换掉所有selector匹配到的元素
调用方式： $(“div.test”).repalceAll($(“p”));
$(“div.test”).replaceAll($(“p#second”));
replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素
调用方式： $(“p#second”).replaceWith(“div.test”);

5、删除DOM元素
jQuery在页面上删除一个DOM的方式有两种，一种是”伪删除“，
即删除之后页面元素的标签还存在只是内容被删除，jQuery中相应的函数为empty();
调用方式：$(“p#second”).empty();
还有一种是真删除，这种删除将使该标签元素从页面上彻底消失，jQuery中相应的函数为remove([expr])
调用方式：$(“p”).remove(“p#second”);

6、克隆DOM元素
clone([true]) 克隆匹配的元素并且选中这些克隆的副本，为true以便复制所有的事件处理。
调用方式：$(“div.test”).clone().prependTo($(“p#second”))
              $(“this”).clone(true).insertAfter(this);