jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之間的區別

時間 2019-11-07

標籤 jquery append appendto prepend prependto insertbefore insertafter 之間區別欄目 JQuery 简体版

原文原文鏈接

jQuery中有一個很關鍵的元素操做,他們的使用方法都同樣,可是呈現的結果有所不一樣.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery.js"></script>
  </head>
  <style>
  p {
    background-color: aquamarine;
  }
  </style>
  <body>
    <p id="n1">
      <span id="n2">span#n2</span>n1    
  </p>
  <p id="n3">
      <label id="n4" class="move">label#n4</label>n3
  </p>
  <p id="n5">
      <span id="n6">span#n6</span>n5
  </p>
  <p id="n7">
    <span id="n8">span#n8</span>n7
  </p>
  <p id="n9">
    <span id="n10">span#n10</span>n9
  </p>
  <p id="n11">
    <span id="n12">span#n12</span>n11
  </p>
  </body>
</html>

先新建一個jQuery div對象:jquery

let newdiv = $('<div>new one</div>');

分別使用下列語句看看有什麼效果app

$('#n1').append(newdiv.clone());
newdiv.clone().insertAfter('#n1');
newdiv.clone().appendTo('#n3');
$('#n5').prepend(newdiv.clone());
$('#n5').insertBefore(newdiv.clone());
newdiv.clone().prependTo('#n7')
$('#n9').before(newdiv.clone());
newdiv.clone().before('#n9');
$('#n11').after(newdiv.clone());
newdiv.clone().after('#n11');

相信通過以上的代碼你可以知道一些關係了:spa

1 To和不帶To就是一個相反的關係code

2 **pend是在p元素內末尾添加,成爲p的last-child insert**是在p元素外添加,成爲p的next,或first-siblinghtm

3 A.before(B) = B.insertBefore(A) A.after(B) = B.insertAfter(A)效果上是相等的,可是返回值不同,若是使用before返回的是A,若是是insert返回的是B對象

但願以上的總結能對你的理解有所幫助.blog