jQuery的添加元素 - append() / prepend() / after() / before()

四種方法添加 HTML 内容 :

jQuery四種方法來添加新的 HTML 内容 :

• append() : 在選擇元素的結尾插入內容。
• prepend() : 在選擇元素的開頭插入內容。
• after() : 在選擇元素的之後插入內容。
• before() : 在選擇元素的之前插入內容。

append() 方法 :

jQuery append() 方法，是在被選擇的元素結尾，插入內容。
append() 練習

append.html

<p>這是標題</p>
<ol>
  <li>列表 1</li>
  <li>列表 2</li>
  <li>列表 3</li>
</ol>
<button id="btn1">增加標題</button>
<button id="btn2">增加列表</button>

script

$(function () {
  $("#btn1").click(function () {
    $("p").append("<b>append 文字</b>");  //選擇元素結尾.append(要插入的內容)
  });
  $("#btn2").click(function () {
    $("ol").append("<li>append 列表</li>")
  });
})

---

prepend() 方法 :

jQuery prepend() 方法，是在被選擇的元素開頭，插入內容。
prepend() 練習

同append.html

script

$(function () {
  $("#btn1").click(function () {
    $("p").prepend("<b>append 文字</b>");  //選擇元素開頭.prepend(要插入的內容)
  });
  $("#btn2").click(function () {
    $("ol").prepend("<li>append 列表</li>")
  });
})

---

應用 append() / prepend() :

上述 append() / prepend() 方法，僅用在被選擇的元素開頭與結尾插入內容，但是 append() / prepend() 也能應用在無限數量的產出新元素，可以利用 HTML 創建元素，也能用 jQuery 創建元素，或者用最底層 javascript 方式來創建 DOM 元素，然後用 append() / prepend() 來產生出來。
應用練習

append.html

<p>這是標題</p>
<button onclick="appendText()">增加標題</button>

script

function appendText() {
  var textA = "<p>用HTML創建的元素</p>";                   //用HTML創建的元素
  var textB = $("<p></p>").text("用jQuery創建的元素");     //用jQuery創建的元素
  var textC = document.createElement("p");
  textC.innerHTML = "用DOM創建的元素";                     //用DOM創建的元素
  $("body").append(textA, textB, textC);                  //使用append輸出內容
}

---

after() / before 方法 :

jQuery after() 方法，是在被選擇的元素之後，插入內容
jQuery before() 方法，是在被選擇的元素之前，插入內容
after()/before() 練習

append.html

<span> 這是標題 </span>
<br><br>
<button id="btn1">在標題前面增加文字</button>
<button id="btn2">在標題後面增加文字</button>

script

$(function () {
  $("#btn1").click(function () {
    $("span").before("<b>Before</b>");  //選擇元素之前.before(要插入的內容)
  });
  $("#btn2").click(function () {
    $("span").after("<i>After</i>")     //選擇元素之後.after(要插入的內容)
  });
})

---

應用 after() / before() :

上述 after() / before() 方法，僅用在被選擇的元素開頭與結尾插入內容，但是 after() / before() 也能應用在無限數量的產出新元素，可以利用 HTML 創建元素，也能用 jQuery 創建元素，或者用最底層 javascript 方式來創建 DOM 元素，然後用 after() / before() 來產生出來。
應用練習

append.html

<span> 這是標題 </span>
<br><br>
<button onclick="afterText()">增加標題</button>

script

function afterText() {
  var textA = "<b> HTML </b>";                   //用HTML創建的元素
  var textB = $("<i></i>").text(" jQuery ");     //用jQuery創建的元素
  var textC = document.createElement("big");
  textC.innerHTML = " DOM ";                     //用DOM創建的元素
  $("span").after(textA, textB, textC);          //使用after輸出內容
}