【jQuery】解析六種添加元素方法

回覆文章分享
【jQuery】解析六種添加元素方法

本篇重點

  • 常見的添加元素方法
  • 添加到指定元素內部：.append()、.prepend()、.appendTo()、.prependTo()
  • 添加到指定元素外部：.after()、.before()
  • 介紹各方法的使用效果及適用情境

開發網頁互動功能或動態內容時，動態新增 HTML 元素是常見的需求，例如：點擊按鈕時添加圖片、在特定區塊加入提示訊息等。

在 jQuery 中，為了讓這些操作更簡潔有效率，提供了多種用來「新增元素」的方法，如 .append()、.prepend()、.after()、.before()、.appendTo() 與 .prependTo()，雖然功能相似，但添加的位置與語法的寫法略有不同！

添加到指定元素內部

.append()

在選取元素內部的最後方添加新內容

js
1
$(目標元素).append(要添加的內容);

範例：

html
1
2
3
4
5
6
7
8
9
<div class="box">
    <div class="content">
        <div id="box">Hello</div>
    </div>
    <div class="field is-grouped">
        <button class="button is-link example">.append() 添加元素</button>
        <button class="button reset">reset</button>
    </div>
</div>
js
1
2
3
4
5
6
7
8
9
// .append()
$('.example').on('click', function() {
    $('#box').append('<p>World</p>');
});

// reset
$('.reset').on('click', function() {
    $('.content').html('<div id="box">Hello</div>');
});

結果：

html
1
2
3
4
<div id="box">
  Hello
  <p>World</p>
</div>

.prepend()

在選取元素內部的最前方添加新內容

js
1
$(目標元素).prepend(要添加的內容);

範例：

html
1
2
3
4
5
6
7
8
9
<div class="box">
    <div class="content">
        <div id="box">World</div>
    </div>
    <div class="field is-grouped">
        <button class="button is-link example">.prepend() 添加元素</button>
        <button class="button reset">reset</button>
    </div>
</div>
js
1
2
3
4
5
6
7
8
9
// prepend()
$('.example').on('click', function() {
    $('#box').prepend('<p>Hello</p>');
});

// reset
$('.reset').on('click', function() {
    $('.content').html('<div id="box">World</div>');
});

結果：

html
1
2
3
4
<div id="box">
  <p>Hello</p>
  World
</div>

.appendTo()

把新內容添加到目標元素內部的最後方

js
1
$(要添加的內容).appendTo(目標元素);

範例：

html
1
2
3
4
5
6
7
8
9
<div class="box">
    <div class="content">
        <div id="box">Hello</div>
    </div>
    <div class="field is-grouped">
        <button class="button is-link example">.appendTo() 添加元素</button>
        <button class="button reset">reset</button>
    </div>
</div>
js
1
2
3
4
5
6
7
8
9
10
// .appendTo()
$('.example').on('click', function() {
    $('<p>World</p>').appendTo('#box');
    // 效果和 $('#box').append('<p>World</p>'); 相同
});

// reset
$('.reset').on('click', function() {
    $('.content').html('<div id="box">Hello</div>');
});

結果：

html
1
2
3
4
<div id="box">
    Hello
    <p>World</p>
</div>

.prependTo()

把新內容添加到目標元素內部的最前方

js
1
$(要添加的內容).prependTo(目標元素);

範例：

html
1
2
3
4
5
6
7
8
9
<div class="box">
    <div class="content">
        <div id="box">World</div>
    </div>
    <div class="field is-grouped">
        <button class="button is-link example">.prependTo() 添加元素</button>
        <button class="button reset">reset</button>
    </div>
</div>
js
1
2
3
4
5
6
7
8
9
10
// .prependTo()
$(".example").on("click", function () {
    $("<p>Hello</p>").prependTo("#box");
    // 效果和 $('#box').prepend('<p>Hello</p>'); 相同
});

// reset
$(".reset").on("click", function () {
    $(".content").html('<div id="box">World</div>');
});

結果：

html
1
2
3
4
<div id="box">
    <p>Hello</p>
    World
</div>

添加到指定元素外部

.after()

在選取元素外部的後面添加新內容

js
1
$(目標元素).after(要添加的內容);

範例：

html
1
2
3
4
5
6
7
8
9
<div class="box">
    <div class="content">
        <div id="box">Hello</div>
    </div>
    <div class="field is-grouped">
        <button class="button is-link example">.after() 添加元素</button>
        <button class="button reset">reset</button>
    </div>
</div>
js
1
2
3
4
5
6
7
8
9
// .after()
$('.example').on('click', function() {
    $('#box').after('<p>World</p>');
});

// reset
$('.reset').on('click', function() {
    $('.content').html('<div id="box">Hello</div>');
});

結果：

html
1
2
3
4
<div id="box">
    Hello
</div>
<p>World</p>

.before()

在選取元素外部的前面添加新內容

語法：

js
1
$(目標元素).before(要添加的內容);

範例：

html
1
2
3
4
5
6
7
8
9
<div class="box">
    <div class="content">
        <div id="box">World</div>
    </div>
    <div class="field is-grouped">
        <button class="button is-link example">.before() 添加元素</button>
        <button class="button reset">reset</button>
    </div>
</div>
js
1
2
3
4
5
6
7
8
9
// .before()
$('.example').on('click', function() {
    $('#box').before('<p>Hello</p>');
});

// reset
$('.reset').on('click', function() {
    $('.content').html('<div id="box">World</div>');
});

結果：

html
1
2
<p>Hello</p>
<div id="box">World</div>

添加位置比較

方法添加位置
.append()目標元素內部最後
.prepend()目標元素內部最前
.appendTo()目標元素內部最後
.prependTo()目標元素內部最前
.after()目標元素外部後面
.before()目標元素外部前面

結論

我常常忘記哪些方法是添加到元素內部，哪些是添加到元素外部，所以用這篇文章來做個整理，方便自己記憶😆。這些添加元素的方法在做前端互動時非常實用，如果有其他更簡單、方便的添加方法，歡迎留言分享～

延伸閱讀

【jQuery】解析六種添加元素方法

https://forgetfulengineer.github.io/Frontend/JQuery/Analyzing-Six-Methods-for-Adding-Elements/

作者

健忘工程師

發表於

2025-05-09

更新於

2025-05-09

許可協議

你可能也想看

【jQuery、css】解析六種組合選擇器：相連、+、～、>、,、空格
【jQuery】click 事件綁定方式比較
【jQuery】尋找父元素、同層元素和子元素的方法

評論

文章目錄

follow.it

歡迎訂閱電子報！追蹤【健忘工程師】的最新資訊～

廣告

最新文章

廣告

×
複製完成