【JS】【27】在特定的位置添加元素

前言：

1，append() - 在被选元素的结尾插入内容

2，prepend() - 在被选元素的开头插入内容

3，after() - 在被选元素之后插入内容

4，before() - 在被选元素之前插入内容

5，appendTo() - 效果和append是一样的，只不过写法是反着来

正文：

html

<div>开头<div/>
<div>
  <div>before</div>
  <div id="div1"><div>prepend</div>文本1<div>append</div><div/>
  <div>after</div>
  <div id="div2">文本2<div/>
<div/>
<div>结尾<div/>

js

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").append("<div>append</div>"); 
   //$("<div>append</div>").appendTo("#div1");
  });
  $("#btn2").click(function(){
    $("#div1").prepend("<div>prepend</div>");
  });
  $("#btn3").click(function(){
    $("#div1").after("<div>after</div>");
  });
  $("#btn4").click(function(){
    $("#div1").before("<div>before</div>");
  });
});