jQuery中的文档处理

分类：

1.内部插入方式：
append()
定义：向每个匹配的元素内部追加内容。
例：向div中插入一个段落p

 <div></div>
    <script>
    $("div").append("
段落
");
    </script>

appendTo()
定义：把所有匹配的元素追加到另一个指定的元素元素集合中。
例：把p追加到id为box的div中

 <div id="box"></div>
    <p>我是一个段落</p>
    <script>
    $("p").appendTo("#box");
    </script>

prepend()
定义：向每个匹配的元素内部前置内容。
例：向p前面插入span

<div id="box"></div>
    <p>我是一个段落</p>
    <span>我是一个span</span>
    <script>
    $("p").prepend($("span"));
    </script>

prependTo()
定义：把所有匹配的元素前置到另一个、指定的元素元素集合中。
例：把span前置到id为box的div中

 <div id="box"></div>
    <p>我是一个段落</p>
    <span>我是一个span</span>
    <script>
    $("span").prependTo($("#box"));
    </script>

2.外部插入方式：
after()
定义：在每个匹配的元素之后插入内容。
例：在段落后插入一个b标签

 <p>我是一个段落</p>
    <span>我是一个span</span>
    <script>
    $("p").after("Hello");
    </script>

before()
定义：在每个匹配的元素之前插入内容。
例：在段落前插入一个b标签

 <p>我是一个段落</p>
    <span>我是一个span</span>
    <script>
    $("p").before("Hello");
    </script>

insertAfter()
定义：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
例：把b标签插入到p标签之后

    <b>你好</b>
    <p>我是一个段落</p>
    <script>
    $("b").insertAfter($("p"));
    </script>

insertBefore()
定义：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
例：把span标签插入到p标签之前

    <b>你好</b>
    <p>我是一个段落</p>
    <span>hello world</span>
    <script>
    $("span").insertBefore($("p"));
    </script>

3.包裹：
wrap()
定义：把所有匹配的元素用其他元素的结构化标记包裹起来。
例：把段落用一个新创建的div包裹起来

   <p>我是一个段落</p>
    <script>
   $("p").wrap("
");
    </script>

unwrap()
定义：移出元素的父元素。
例：

  <div>
        <p>Hello</p>
        <p>cruel</p>
        <p>World</p>
    </div>
    <script>
   $("p").unwrap()
    </script>

wrapAll()
定义：将所有匹配的元素用单个元素包裹起来。
例：用一个生成的div将所有段落包裹起来

   <p>Hello</p>
        <p>cruel</p>
        <p>World</p>  
    <script>
  $("p").wrapAll("
");
    </script>

4.替换：
replaceWith()
定义：将所有匹配的元素替换成指定的HTML或DOM元素。
例：把p替换成加粗的标记

    <p>Hello</p> 
    <script>
 $("p").replaceWith("Paragraph. ");
    </script>

replaceAll()
定义：用匹配的元素替换掉所有 selector匹配到的元素。
例：把所有p替换成加粗的标记

   <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <script>
 $("Paragraph. ").replaceAll("p");
    </script>

5.删除：
empty()
定义：删除匹配的元素集合中所有的子节点。
例：把所有段落的子元素（包括文本节点）删除

  <p>Hello, <span>Person</span> <a href="#">and person</a></p>
    <script>
        $("p").empty();
    </script>

remove()
定义：从DOM中删除所有匹配的元素。
例：从DOM中把所有段落删除

  <p>Hello</p> how are <p>you?</p>
    <script>
        $("p").remove();
    </script>

6.复制：
clone()
定义：克隆匹配的DOM元素并且选中这些克隆的副本。
例：克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

   <b>Hello</b><p>, how are you?</p>
    <script>
       $("b").clone().prependTo("p");
    </script>