jQuery والتعامل مع DOM

إنشاء وإدراج العناصر

15 دقيقة الدرس 14 من 30

إنشاء وإدراج العناصر

توفر jQuery طرقًا قوية لإنشاء عناصر HTML جديدة ديناميكيًا وإدراجها في صفحتك. هذا ضروري لبناء تطبيقات ويب تفاعلية تستجيب لإجراءات المستخدم.

إنشاء عناصر جديدة

يمكنك إنشاء عناصر HTML جديدة باستخدام دالة jQuery البانية مع سلسلة HTML:

إنشاء عنصر أساسي:
// إنشاء فقرة جديدة
let newPara = $("<p></p>");

// إنشاء مع محتوى
let heading = $("<h3>عنوان جديد</h3>");

// إنشاء مع خصائص
let link = $("<a>", {
    text: "انقر هنا",
    href: "https://example.com",
    class: "btn btn-primary",
    target: "_blank"
});

// إنشاء عناصر معقدة
let card = $("<div>", {
    class: "card",
    html: "<h4>عنوان البطاقة</h4><p>محتوى البطاقة</p>"
});

نصيحة احترافية: استخدام صيغة الكائن للخصائص أكثر وضوحًا وأمانًا من دمج سلاسل HTML، خاصة عند التعامل مع مدخلات المستخدم.

إدراج العناصر بالداخل

تقدم jQuery أربع طرق لإدراج المحتوى داخل العناصر الموجودة:

.append() - الإدراج في النهاية:
// إضافة محتوى في نهاية العناصر المطابقة
$("#container").append("<p>تمت الإضافة في النهاية</p>");

// عناصر متعددة
$("#list").append(
    $("<li>عنصر 1</li>"),
    $("<li>عنصر 2</li>"),
    $("<li>عنصر 3</li>")
);

// استخدام دالة
$("div.box").append(function(index) {
    return "<span>صندوق " + (index + 1) + "</span>";
});

.appendTo() - عكس append():
// إنشاء وإلحاق في خطوة واحدة
$("<p>فقرة جديدة</p>").appendTo("#container");

// نقل عنصر موجود
$("#logo").appendTo(".header");

.prepend() - الإدراج في البداية:
// إضافة محتوى في بداية العناصر المطابقة
$("#container").prepend("<p>تمت الإضافة في البداية</p>");

// إضافة طابع زمني للمنشورات
$(".blog-post").prepend(function() {
    return "<span class='timestamp'>" + new Date().toLocaleDateString() + "</span>";
});

.prependTo() - عكس prepend():
// إنشاء وإضافة في البداية
$("<h2>إشعار مهم</h2>").prependTo(".content");

// نقل عنصر إلى البداية
$(".priority-item").prependTo("#list");

إدراج العناصر بالخارج

تقوم هذه الطرق بإدراج المحتوى قبل أو بعد العناصر، كأشقاء:

.after() - الإدراج بعد العنصر:
// إضافة محتوى بعد العناصر المطابقة
$("h2").after("<hr>");

// إضافة زر تعديل بعد كل منشور
$(".post").after("<button class='edit-btn'>تعديل</button>");

// استخدام دالة
$("img").after(function() {
    return "<p class='caption'>" + $(this).attr("alt") + "</p>";
});

.insertAfter() - عكس after():
// إنشاء وإدراج بعد
$("<div class='ad'>إعلان</div>").insertAfter(".post:nth-child(3)");

// نقل عنصر
$("#sidebar").insertAfter(".main-content");

.before() - الإدراج قبل العنصر:
// إضافة محتوى قبل العناصر المطابقة
$("h2").before("<div class='spacer'></div>");

// إضافة أيقونة قبل الروابط
$("a.external").before("<i class='icon-external'></i> ");

.insertBefore() - عكس before():
// إنشاء وإدراج قبل
$("<p class='intro'>نص تمهيدي</p>").insertBefore(".content");

// نقل عنصر
$(".important-notice").insertBefore("h1");

مثال عملي: قائمة مهام ديناميكية

HTML:
<div class="task-manager">
    <input type="text" id="taskInput" placeholder="أدخل مهمة">
    <button id="addTask">إضافة مهمة</button>
    <button id="addUrgent">إضافة مهمة عاجلة</button>
    <ul id="taskList"></ul>
    <p class="task-count">إجمالي المهام: <span>0</span></p>
</div>

jQuery:
$(document).ready(function() {
    // إضافة مهمة في النهاية
    $("#addTask").click(function() {
        let taskText = $("#taskInput").val().trim();

        if (taskText) {
            let taskItem = $("<li>", {
                class: "task-item",
                html: "<span>" + taskText + "</span> <button class='delete-btn'>×</button>"
            });

            $("#taskList").append(taskItem);
            $("#taskInput").val(""); // مسح الحقل
            updateTaskCount();
        }
    });

    // إضافة مهمة عاجلة في البداية
    $("#addUrgent").click(function() {
        let taskText = $("#taskInput").val().trim();

        if (taskText) {
            let urgentTask = $("<li>", {
                class: "task-item urgent",
                html: "<span>⚠️ " + taskText + "</span> <button class='delete-btn'>×</button>"
            });

            $("#taskList").prepend(urgentTask);
            $("#taskInput").val("");
            updateTaskCount();
        }
    });

    // حذف مهمة (تفويض الأحداث)
    $("#taskList").on("click", ".delete-btn", function() {
        $(this).parent().fadeOut(300, function() {
            $(this).remove();
            updateTaskCount();
        });
    });

    // تحديث عدد المهام
    function updateTaskCount() {
        let count = $("#taskList li").length;
        $(".task-count span").text(count);
    }

    // السماح بزر Enter لإضافة مهمة
    $("#taskInput").keypress(function(e) {
        if (e.which === 13) {
            $("#addTask").click();
        }
    });
});

نصيحة للأداء: عند إدراج عناصر متعددة، قم بإنشائها جميعًا مرة واحدة أو استخدم DocumentFragment لتقليل إعادة رسم DOM. تقوم jQuery بتحسين هذا تلقائيًا عند تمرير عناصر متعددة.

تحذير: قم دائمًا بتنظيف مدخلات المستخدم قبل إدراجها في DOM لمنع هجمات XSS (البرمجة النصية عبر المواقع). استخدم .text() بدلاً من .html() عند التعامل مع مدخلات المستخدم، أو قم بإخفاء كيانات HTML بشكل صحيح.

تقنيات متقدمة

ربط إدراجات متعددة:
// إنشاء هيكل معقد بالربط
$("#container")
    .append("<div class='header'></div>")
    .find(".header")
    .append("<h1>العنوان</h1>")
    .after("<div class='content'></div>")
    .next()
    .append("<p>فقرة المحتوى</p>");

// إدراج مجمع بمصفوفة
let items = ["تفاح", "موز", "برتقال"];
let listItems = items.map(function(item) {
    return $("<li>", { text: item });
});
$("#fruitList").append(listItems);

إدراج مشروط:
// إدراج بناءً على شرط
function addNotification(message, type) {
    let notification = $("<div>", {
        class: "notification " + type,
        text: message
    });

    if (type === "error") {
        notification.prependTo("#notifications"); // الأخطاء في الأعلى
    } else {
        notification.appendTo("#notifications"); // الآخرون في الأسفل
    }

    // إزالة تلقائية بعد 5 ثوان
    setTimeout(function() {
        notification.fadeOut(500, function() {
            $(this).remove();
        });
    }, 5000);
}

// الاستخدام
addNotification("تم تحديث الملف الشخصي بنجاح", "success");
addNotification("فشل تحميل البيانات", "error");

تمرين: أنشئ نظام تعليقات ديناميكي حيث يمكن للمستخدمين:

إضافة تعليقات في أسفل قائمة التعليقات
إضافة ردود على تعليقات محددة (يتم إدراجها بعد التعليق الأصلي)
إضافة طابع زمني لكل تعليق
عرض رسالة "لا توجد تعليقات بعد" عندما تكون القائمة فارغة
حذف التعليقات الفردية مع تأكيد

إضافي: أضف القدرة على تعديل التعليقات وحفظها مباشرة.

أفضل الممارسات

استخدم تدوين الكائن عند إنشاء عناصر بخصائص لقراءة أفضل
احفظ المراجع للعناصر المنشأة إذا كنت بحاجة إلى معالجتها لاحقًا
ضع في اعتبارك الأداء عند إدراج عناصر كثيرة - اجمع العمليات عندما يكون ذلك ممكنًا
تحقق من المدخلات قبل إدراج محتوى من إنشاء المستخدم
استخدم تفويض الأحداث للعناصر المضافة ديناميكيًا
نظف معالجات الأحداث عند إزالة العناصر لمنع تسرب الذاكرة

الملخص

في هذا الدرس، تعلمت كيفية إنشاء وإدراج العناصر ديناميكيًا:

إنشاء العناصر بدالة $() البانية
الإدراج بالداخل باستخدام .append()، .appendTo()، .prepend()، .prependTo()
الإدراج بالخارج باستخدام .after()، .insertAfter()، .before()، .insertBefore()
بناء واجهات ديناميكية عملية
اعتبارات الأداء والأمان

بعد ذلك، سنستكشف استبدال العناصر وتغليفها لتحويل هيكل DOM الخاص بك.