j-Query，Manipulate(操作)，append、prepend、before、after

2018-01-24

148
0
j-Query

j-Query 對Dom元素的操作方式，使用append、prepend、before、after

簡單記錄一下定義：

Function	定義
append()	將元素插入在目標元素內層的最後一個
prepend()	將元素插入在目標元素內層的第一個
before()	將元素插入在目標元素的上面
after()	將元素插入在目標元素的下方

簡單來看一下demo code

append()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){
     
      $("ul").append("<li>點部落</li>")

 });
</script>

prepend()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){
     
      $("ul").prepend("<li>點部落</li>")

 });
</script>

before()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){
     
    $("ul").children().first().before("<li>點部落</li>");

 });
</script>

after()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){
     
    $("ul").children().last().after("<li>點部落</li>");

 });
</script>

回首頁