Bootstarp之jquery操作增、删、改的使用

Dom插入现有元素内：

.append：在每个匹配元素里面的末尾处插入参数内容
.append()函数将特定的内容插入到每个匹配元素里面的最后面，作为他的最后一个子元素，（如果要作为第一个元素用.prepend()）

.appendTo:将匹配的元素插入到目标元素的最后面
实例：
HTML部分：

          <p>How are you?</p>
          <span>Hello World</span>
          <div id="foo">FOO!</div>

css部分：

<style>
        p{
            background: yellow;
            display:block;
            width: 500px;  
        }
        #foo{
            background: red;
            display:block;
            width: 500px; 
        }
     </style>

js部分：

 $("p").append("<strong>I am fine</strong>");
          $("span").appendTo("#foo");

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式 或创建作为标记上的标记，它都将被插入到目标容器的末尾。

Dom移除 ：从Dom树中删除元素

.detach():从DOM中去掉所有匹配的元素
.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM时，这种方法很有用。
实例：
HTML部分：

    来删除我呀！
        <p>Hello world</p>
        <p> How are you?</p>
        <p>I am fine</p>
        <button> Attach/deatch paragraphs</button>

css部分：

 <style>
            p{
                background-color: bisque;
                margin: 6px 0;

            }
            p.off{
                background: black;

            }
        </style>

js部分：

 $("p").click(function(){
                 $(this).toggleClass("off");

             });
             var p;
             $("button").click(function(){
                 if(p){
                     p.appendTo("body");
                     p = null;
                 }else{
                     p = $("p").detach();
                 }
             });

效果：

.empty():从DOM中移除集合中匹配元素的所有子节点。
该方法不接受任何参数。 该方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串 都被看做是该元素的子节点。
实例：移除段落中的所有子节点包括文本
html部分：

 <p>
            Hello, <span>Person</span> <a href="javascript:;">and person</a>
          </p>
          <button> above paragraph</button>

js部分：

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

效果：

.remove() 将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
和 .empty()相似。.remove() 将元素移出DOM。 当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。要删除的元素不删除数据和事件的情况下，使用.detach()来代替。
实例：从 DOM 中移除所有含有 “Hello” 的段落。
HTML部分

  <p class="hello">Hello</p>
            how are
            <p>you?</p>
 
         <button>Call remove(":contains('Hello')") on paragraphs</button>

js部分：

  $("button").click(function () {
            $("p").remove(":contains('Hello')");
            });

效果：

DOM替换：从 DOM 树中移除已有的内容并将其替换为新内容。

.replaceWith()：提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
.replaceWith()可以从DOM中移除内容，然后在这个地方插入新的内容。
看看实例: 点击按钮，用包含同样文字的div替换按钮：

HTML部分：

        <button>one</button>
        <button>two</button>
        <button>three</button>
        

css部分：

  button{
                 display: block;
                 margin: 10px auto;
                 color:blue;
                 width: 200px;
             }
             div{
                 color: blue;
                 border: 1px solid red;
                 width: 200px;
                 margin: 3px;
                 text-align: center;
                 margin: 10px auto;
             }

js部分

 $("button").click(function(){
              $(this).replaceWith("<div>"+ $(this).text() + "</div>");

          });

.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用，但是需要注意的是：对于该方法而言，该对象指向已经从 DOM 中被移除的对象，而不是指向替换用的对象。