متد append و prepend

افزودن محتوای جدید به ابتدا یا انتهای عناصر

افزودن محتوا به عنصر

متدهای append() و prepend() محتوای جدید را داخل عنصر انتخاب‌شده اضافه می‌کنند:

// فرض کنید: <ol id="list"><li>آیتم ۱</li></ol>

$("#list").append("<li>آیتم جدید در انتها</li>");
// نتیجه: آیتم ۱، آیتم جدید در انتها

$("#list").prepend("<li>آیتم جدید در ابتدا</li>");
// نتیجه: آیتم جدید در ابتدا، آیتم ۱، ...

چه چیزهایی می‌توان اضافه کرد؟

هر دو متد چند نوع محتوا قبول می‌کنند:

// ۱. رشته HTML
$("p").append(" <b>متن اضافه</b>");

// ۲. عنصر jQuery موجود (جابه‌جایی عنصر!)
$("p").append($("#someDiv"));

// ۳. عنصر DOM جاوااسکریپت
$("p").append(document.createElement("span"));

// ۴. چند محتوا با هم
$("p").append(" متن۱ ", " متن۲ ", " متن۳ ");
اگر عنصر موجود را append کنید، عنصر جابه‌جا می‌شود نه کپی! برای کپی کردن، اول clone() بزنید: $("p").append($("#someDiv").clone())

append با callback

مثل متدهای قبلی، callback هم قبول می‌شود:

// افزودن شماره ترتیبی به هر لیست
$("li").append(function(index) {
    return " (آیتم شماره " + (index + 1) + ")";
});

مثال کاربردی: افزودن آیتم به لیست خرید

$("#addItem").click(function() {
    var itemText = $("#itemInput").val();

    if (itemText !== "") {
        // ساخت آیتم جدید با دکمه حذف
        var $newItem = $("<li>" + itemText +
            ' <button class="remove">✕</button></li>');

        $("#shoppingList").append($newItem);
        $("#itemInput").val("").focus();  // خالی کردن و فوکوس
    }
});

تفاوت با html()

متدرفتار
html("متن")محتوای قبلی پاک و متن جدید جایگزین می‌شود
append("متن")متن جدید به محتوای فعلی اضافه می‌شود

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط