【jQuery】5、jquery文档处理

append(content|fn) 向每个匹配的元素内部追加内容

<div>jquery</div>

$("div").append("<b>Hello</b>");	//<div>jquery <b>Hello</b> </div>

appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中

<p>jquery</p>
<div>JQuery</div>
//把p标签放到div标签里面，外面的p标签删除
$("p").appendTo("div"); //<div>JQuery <p>jquery</p> </div>

prepend(content) 向每个匹配的元素内部前置内容

<div>1234</div>

$("div").prepend("<p>Hello</p>");	//<div> <p>Hello</p>1234</div>

prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中

<div>1234</div>
<p>jquery</p>

$("p").prependTo("div");	//<div> <p>Hello</p>1234</div>

after(content|fn) 在每个匹配的元素之后插入内容

<div>1234</div>
<p>jquery</p>
//在匹配到的第一个div标签后面加一个<p>Hello</p>标签
$("div")[0].after("<p>Hello</p>");	//<div>1234</div><p>Hello</p>
//还可以剪切标签,将匹配到的div标签剪切到p标签后面
$("div").after( $("p") );	//<p>jquery</p> <div>1234</div>

before(content|fn) 在每个匹配的元素之前插入内容 与 after相反

//在匹配到的第一个div标签前面加一个<p>Hello</p>标签
$("div").before("<p>Hello</p>");
//将匹配到的div标签剪切到p标签前面
$("div").before( $("p") );

insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面

<p>1234</p>
<div id="foo">Hello</div>
//把匹配到的p标签剪切到匹配到的标签后面
$("p").insertAfter("#foo");
//结果如下
<div id="foo">Hello</div>
<p>1234</p>

insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面

<div id="foo">Hello</div>
<p>1234</p>
//把匹配到的p标签剪切到匹配到的标签后面
$("p").insertBefore("#foo");
//结果如下
<p>1234</p>
<div id="foo">Hello</div>

wrap(html|element|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来

<p>jquery</p>

$("p").wrap("<div class='wrap'></div>");
//结果如下
<div class='wrap'>
   <p>jquery</p>
</div>

unwrap() 这个方法将移出元素的父元素 与上述wrap方法相反

<div class='wrap'>
   <p>jquery</p>
</div>

$("p").unwrap();
//结果如下
<p>jquery</p>

wrapAll(html|ele) 将所有匹配的元素用单个元素包裹起来

<p>1jquery</p>
<p>2jquery</p>
<div>3JQuery</div>
<p>4jquery</p>

$("p").wrapAll("<div></div>");
//结果如下
<div>
  <p>1jquery</p>
  <p>2jquery</p>
  <p>4jquery</p>
</div>
<div>3JQuery</div>

wrapInner(htm|element|fnl) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

<div class="aa">
   <p>1jquery</p>
   <p>2jquery</p>
 </div>

$("div").wrapInner("<div></div>");
//结果如下
<div class="aa">
  <div>
     <p>1jquery</p>
     <p>2jquery</p>
  </div>
</div>

replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素

<p>1jquery</p>
<p>2jquery</p>
//替换
$("p").replaceWith("<div>jquery</div>");
//结果如下
<div>jquery</div>
<div>jquery</div>

replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素

<p>1jquery</p>
<p>2jquery</p>
<div>3jquery</div>
//剪切匹配到的div 替换匹配到的p
$("div").replaceAll("p");
//结果如下
<div>3jquery</div>
<div>3jquery</div>

empty() 删除匹配的元素集合中所有的子节点

<div>1jquery<p>2jquery</p></div>

$("div").empty();
//结果如下
<div></div>

remove([expr]) 从DOM中删除所有匹配的元素

<p>1jquery</p>
<p>2jquery</p>
<div>3jquery</div>

$("p").remove();
//结果如下
<div>3jquery</div>

detach([expr]) 从DOM中删除所有匹配的元素

<p>1jquery</p>
<p class="hello">2jquery</p>

$("p").detach(".hello");
//结果如下
<p>1jquery</p>

clone([Even[,deepEven]]) 复制选中标签

<div>1jquery</div>
<p class="hello">2jquery</p>
//复制p标签，粘贴到div标签内前面
$("p[class='hello']").clone().prependTo("div")
//结果如下
<div>
  <p class="hello">2jquery</p>
  1jquery
</div>
<p class="hello">2jquery</p>