【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>");
  });
});