متد after و before

درج محتوا قبل و بعد از عنصر (خارج از آن)

درج خارج از عنصر

متدهای after() و before() محتوا را خارج از عنصر و در کنارش قرار می‌دهند:

تفاوت با append/prepend

این مهم‌ترین نکته این درس است! فرض کنید این HTML را داریم:

<div id="box">محتوای اصلی</div>
دستورنتیجه
$("#box").append(" جدید")محتوا داخل div قرار می‌گیرد
$("#box").after(" جدید")محتوا بیرون و بعد از div قرار می‌گیرد
راه حفظ کردن: append/prepend = داخل (فرزند)، after/before = بیرون (هم‌سطح). اگر می‌خواهید عنصر داخل والد شود append؛ اگر می‌خواهید کنارش قرار بگیرد after.

مثال‌ها

// افزودن خط جداکننده بعد از هر تیتر
$("h2").after("<hr>");

// افزودن آیکون قبل از هر لینک خارجی
$("a[target='_blank']").before("🔗 ");

// درج پیام بعد از فیلد خطادار
$("#email").after("<span class='error'>ایمیل نامعتبر است!</span>");

متدهای insertAfter و insertBefore

این دو متد برعکس after و before کار می‌کنند — عنصر جدید در ابتدای دستور می‌آید:

// این دو خط یک کار می‌کنند:
$("#target").after("<p>متن</p>");
$("<p>متن</p>").insertAfter("#target");

// این دو خط هم یک کار می‌کنند:
$("#target").before("<p>متن</p>");
$("<p>متن</p>").insertBefore("#target");
تفاوت در چیست؟ مقدار برگشتی! after عنصر هدف را برمی‌گرداند ولی insertAfter عنصر جدید را. اگر بعد از درج می‌خواهید روی عنصر جدید کار کنید، از insertAfter استفاده کنید.

مثال کاربردی: درج پیام خطا بعد از فیلد

function showError($field, message) {
    // حذف خطای قبلی
    $field.next(".field-error").remove();

    // درج خطای جدید بعد از فیلد
    $field.after('<span class="field-error" style="color:red">' +
                message + "</span>");
}

showError($("#email"), "لطفاً ایمیل معتبر وارد کنید");

جمع‌بندی

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

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