jQuery - 新增元素
使用 jQuery，可以輕鬆新增新元素/內容。
新增新的 HTML 內容
我們將介紹四種用於新增新內容的 jQuery 方法：
append()- 在選定元素的末尾插入內容prepend()- 在選定元素的開頭插入內容after()- 在選定元素之後插入內容before()- 在選定元素之前插入內容
jQuery append() 方法
jQuery append() 方法在選定 HTML 元素的末尾插入內容。
jQuery prepend() 方法
jQuery prepend() 方法在選定 HTML 元素的開頭插入內容。
使用 append() 和 prepend() 新增多個新元素
在上面兩個示例中，我們只在選定 HTML 元素的開頭/結尾插入了一些文字/HTML。
但是，append() 和 prepend() 方法都可以接受無限數量的新元素作為引數。新元素可以透過文字/HTML（如上面示例所示）、jQuery 或 JavaScript 程式碼和 DOM 元素來建立。
在以下示例中，我們建立了多個新元素。這些元素是透過文字/HTML、jQuery 和 JavaScript/DOM 建立的。然後，我們使用 append() 方法將新元素追加到文字中（對 prepend() 也會起作用）。
示例
function appendText() {
var txt1 = "<p>文字。</p>"; // 用 HTML 建立元素
var txt2 = $("<p></p>").text("文字。"); // 用 jQuery 建立
var txt3 = document.createElement("p"); // 用 DOM 建立
txt3.innerHTML = "文字。";
$("body").append(txt1, txt2, txt3); // 追加新元素
}
自己動手試一試 »
jQuery after() 和 before() 方法
jQuery after() 方法在選定 HTML 元素之後插入內容。
jQuery before() 方法在選定 HTML 元素之前插入內容。
使用 after() 和 before() 新增多個新元素
同樣，after() 和 before() 方法都可以接受無限數量的新元素作為引數。新元素可以透過文字/HTML（如上面示例所示）、jQuery 或 JavaScript 程式碼和 DOM 元素來建立。
在以下示例中，我們建立了多個新元素。這些元素是透過文字/HTML、jQuery 和 JavaScript/DOM 建立的。然後，我們使用 after() 方法將新元素插入到文字中（對 before() 也會起作用）。
示例
function afterText() {
var txt1 = "<b>我 </b>"; // 用 HTML 建立元素
var txt2 = $("<i></i>").text("愛 "); // 用 jQuery 建立
var txt3 = document.createElement("b"); // 用 DOM 建立
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // 在 <img> 之後插入新元素
}
自己動手試一試 »
jQuery 練習
jQuery HTML 參考
要檢視所有 jQuery HTML 方法的完整概述，請訪問我們的 jQuery HTML/CSS 參考。
