DOM Insertion, Inside 追加元素内容

1.append ()

                向每个匹配的元素内部追加内容。

实例：

<div style="background-color: #222222;color: white" >
    <p id="p1">first</p>
    <p id="p2">second</p>
    <p id="p3">third</p>

    <div style="background-color: #666677" id="div">
        <a href="index.html" style="background-color: #35b558">jump to</a>
    </div>
    
    <button id="btn">button</button>
</div>

效果：    

第一段jQuery

    $("#btn").click(function(){
        $("#div a").append($("#p1"));
    })

效果

实际形成的HTML代码：

<div style="background-color: #222222;color: white" >
    <p id="p2">second</p>
    <p id="p3">third</p>

    <div style="background-color: #666677" id="div">
        <a href="index.html" style="background-color: #35b558">jump to              
              <p id="p1">first</p>
        </a>
    </div>
    
    <button id="btn">button</button>
</div>

第二段jQuery代码

    $("#btn").click(function(){
        $("#div").append("<b>hello world</b>");
    })

效果：

实际形成的HTML代码

<div style="background-color: #222222;color: white" >
    <p id="p1">first</p>
    <p id="p2">second</p>
    <p id="p3">third</p>

    <div style="background-color: #666677" id="div">
        <a href="index.html" style="background-color: #35b558">jump to</a>
        <b>hello world</b>
 </div>
    
    <button id="btn">button</button>
</div>

2.prepend()

                   向每个匹配的元素内部前置内容。

 实现起来与append()是一致的，只是每次在元素前面插入

例如同样的jQuery代码：

    $("#btn").click(function(){
        $("#div").append("<b>hello world</b>");
    })

实际形成的HTML代码

<div style="background-color: #222222;color: white" >
    <p id="p1">first</p>
    <p id="p2">second</p>
    <p id="p3">third</p>

    <div style="background-color: #666677" id="div">
          <b>hello world</b>
          <a href="index.html" style="background-color: #35b558">jump to</a> 
    </div> 
    <button id="btn">button</button>
</div>

3.appendTo()

        把所有匹配的元素追加到另一个指定的元素元素集合中。

        实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

例如下面的jQuery代码

    $("#btn").click(function(){
        $("#div").appendTo("#p1");
    })

效果：

实际形成的HTML代码：

<div style="background-color: #222222;color: white" >
   <p id="p1">first
      <div style="background-color: #666677" id="div">
        <a href="index.html" style="background-color: #35b558">jump to</a>
      </div>
   </p> 
  <p id="p2">second</p> 
   <p id="p3">third</p〉 
   <button id="btn">button</button>
</div>

4. prependTo()

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