文档处理

内部插入

append   向每个匹配的元素内部追加内容。     appendTo   把所有匹配的元素追加到另一个指定的元素元素集合中。

<p>I would like to say: </p>                                        <div></div>

$("p").append("<b>Hello</b>");                                    $("p").appendTo("div");
<p>I would like to say: <b>Hello</b></p>                     <div><p>I would like to say: </p></div> 


prepend    向每个匹配的元素内部前置内容。     prependTo      把所有匹配的元素前置到另一个、指定的元素元素集合中
$("p").prepend("<b>Hello</b>");　　　　　　　　　　　　　　　　　　　　<p>I would like to say: </p><div id="foo"></div>　　　　　　　　　　　　　　　　　　
<p><b>Hello</b>I would like to say: </p>                              $("p").prependTo("#foo");            <div id="foo"><p>I would like to say: </p></div>



删除

  通过一张对比表来解释几个方法之间的不同

方法名	参数	被移除的元素所绑定的事件及数据是否也被移除	元素自身是否被移除
empty	无	是	否
remove	选择器表达式，比如 remove(“.class”); remove(“#id”); remove(“tag”):	是	是（无参数时），有参数时要根据参数所涉及的范围。
detach	参数同remove	否	情况同remove

文本域及子节点三个都删除

 

包裹

wrap()  把所有匹配的元素用其他元素的结构化标记包裹起来                                 wrapAll     将所有匹配的元素用单个元素包裹起来       

<p>This is a paragraph.</p>                                               
<p>This is another paragraph.</p>
<button class="btn1">用 div 包裹每个段落</button>　　　　　　

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrap("<div></div>");
  });
});
</script>

unwrap() 方法    删除被选元素的父元素。

$("button").click(function(){
    $("p").unwrap();
  });

删除每个p的父元素

<div>
<p>这是 div 元素中的段落。</p>
</div>

像这种只是删div，p保留

 

wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

$(".btn1").click(function(){
   $("p").wrapInner("<b></b>");
});加粗