1.内部插入
append(content | fn) 向每个匹配的元素内部追加内容。 $("A").append("B"); 把B内容追加到A元素内容
最后 B-->A
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。使用这个方法是颠倒了常
规 $(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中, A-->B , $("A").appendTo("B");
prepend(content | fn) 向每个匹配的元素内部前置内容。$("A").prepend("B"); 把B元素追加带A元素内容
最前B-->A
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。使用这个方法是颠倒了
常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。 A-->B ,
$("A").prependTo("B");
2.外部插入
after(content | fn) 在每个匹配的元素之后插入内容。注意:不是元素里边,是元素后边,相当于同辈元素
before(content | fn) 在每个匹配的元素之前插入内容。注意:不是元素里边,是元素前边,相当于同辈元素
insertAfter(content) 实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,
而是把A插入到B后面。
insertBefore(content) 实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前
面,而是把A插入到B前面。
3.包裹
wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来。$("p").wrap("<div></div>"); 每个
匹配的元素都单独包裹
wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来。
HTML 代码: <p>Test Paragraph.</p><div id="content"></div>
jQuery 代码: $("p").wrap(document.getElementById('content'));
wrap(fn) 把所有匹配的元素用其他元素的结构化标记包装起来。fn :生成包裹结构的一个函数
unwrap() 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以
及他们的同辈元素)会在DOM结构上替换他们的父元素。
wrapAll(html) 将所有匹配的元素用单个元素包裹起来 .比如有很多p标签,匹配到后都包裹在一个div内,这样会破坏原有的结构,因为原有的标签中间可能会添加其他内容比如 <hr>分割线之类的,调用
此方法后这些都会被排除在外
wrapAll(elem) 将所有匹配的元素用单个元素包裹起来 , $("p").wrapAll(document.createElement("div"));
wrapInner(html) :将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来.
相当于包裹的对象是匹配到标签里边的内容,而不是标签本身
wrapInner(elem)将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
$("p").wrapInner(document.createElement("div"));
wrapInner(fn) 将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来 。
fn :生成包裹结构的一个函数
4.替换
replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素。新标签的里边的内容也会换掉
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
$("<b>Paragraph. </b>").replaceAll("p");
$("button").click(function(){
$("p").each(function(i){
//我们要注意的是Jquery中是没有只换标签不换内容的方法的,如果想要做到只换标签不换内容,需
要先获取所有选择元素的内容,再用一个循环把所有的内容一个一个都追加到替换后的标签中去就可以了
$("<div>"+$("p").eq(i).html()+"</div>").replaceAll("p");
});
});
5.删除
empty() 删除匹配的元素集合中所有的子节点。字面意思是将匹配的元素内容变为空,原标签元素还存在
remove([expr]) 从DOM中删除所有匹配的元素。意思是将所有匹配的元素删除,标签不存在了,元素也不存在了
detach([expr]) 从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除,因而可以
在将来再使用这些匹配的元素。
6.复制
clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本