إضافة عنصر jQuery

جزء مهم جدًا من jQuery هو التحكم في DOM.

jQuery يقدم طرق فعالة لاضافة عناصر HTML جديدة.

في هذا الفصل، سنشرح كيفية إضافة عناصر/محتوى HTML جديدة إلى DOM.

إضافة محتوى HTML جديد باستخدام jQuery

باستخدام jQuery، يمكننا إضافة عناصر HTML جديدة بسهولة.

لدينا طرق jQuery التالية لإنشاء محتوى جديد:

• append()

• prepend()

• after()

• before()

• wrap()

سأريكم الآن كيفية استخدام كل طريقة.

طريقة jQuery append()

jQuery append()تضيف هذه الطريقة محتوى مسبقًا معينًا عند نهاية كل عنصر محدد (كآخر عنصر فرعي).

في المثال التالي، يتم إدراج بعض النصوص في كل فقرة:

$("button").click(function(){
　　$("p").append("Hello world");
});

في المثال التالي، يتم إدراج بعض HTML في كل فقرة:

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

طريقة jQuery prepend()

jQuery prepend()تضيف هذه الطريقة محتوى مسبقًا معينًا عند بداية كل عنصر محدد (كأول عنصر فرعي).

في المثال التالي، يتم إدراج بعض النصوص قبل كل فقرة:

$("button").click(function(){
　　$("p").prepend("Hello world");
});

في المثال التالي، يتم إدراج بعض HTML قبل كل فقرة:

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

إضافة عدة عناصر باستخدام append() و prepend()

في المثال السابق، قمنا بإدراج بعض النصوص / HTML في بداية/نهاية العنصر HTML المحدد.

لكن،append()وprepend()يمكن استخدام هذه الطرق لاستقبال عدد غير محدود من العناصر الجديدة كمعامل.

يمكن استخدام عناصر HTML (مثل المثال المذكور أعلاه)، عناصر DOM أو وحدات jQuery لإنشاء عناصر جديدة.

في المثال التالي، نستخدم عناصر HTML، عناصر DOM ووحدات jQuery لإنشاء عدة عناصر جديدة：

function appendText() {
　　let x = "<p>نص مثال.</p>"; // إنشاء عن طريق HTML　　
　　let y = $("<p></p>").text("نص مثال."); // إنشاء باستخدام jQuery
　　let z = document.createElement("p"); // إنشاء عن طريق DOM
　　z.innerHTML = "نص مثال.";
　　$("body").append(x, y, z); // إضافة عناصر جديدة　
}

طريقة jQuery after()

jQuery after()تضيف هذه الطريقة محتوى مسبقًا معينًا بعد العنصر المحدد.

في المثال التالي، يتم إدراج محتوى بعد كل فقرة:

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

طريقة jQuery before()

jQuery before()تضيف هذه الطريقة محتوى مسبقًا معينًا قبل العنصر المحدد.

في المثال التالي، يتم إدراج محتوى قبل كل فقرة:

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

إضافة عدة عناصر باستخدام before() و after()

على نفس النمط،after()وbefore()يمكن استخدام هذه الطرق لاستقبال عدد غير محدود من العناصر الجديدة كمعامل.

يمكن استخدام عناصر HTML (مثل المثال المذكور أعلاه)، عناصر DOM أو وحدات jQuery لإنشاء عناصر جديدة.

في المثال التالي، نستخدم عناصر HTML، عناصر DOM ووحدات jQuery لإنشاء عدة عناصر جديدة：

function afterText() {
　　let x = "<p>نص مثال.</p>"; // إنشاء عن طريق HTML　　
　　let y = $("<p></p>").text("نص مثال."); // إنشاء باستخدام jQuery
　　let z = document.createElement("p"); // إنشاء عن طريق DOM
　　z.innerHTML = "نص مثال.";
　$("h1").after(x, y, z); // إدراج عنصر جديد بعد <h1>
}

طريقة wrap jQuery

jQuery wrap()تقوم الطريقة بتعبئة الهيكل HTML المحدد حول كل عنصر مختار

في المثال التالي، سيتم تعبئة عنصر DIV في كل عنصر <p> أمام وبعد كل عنصر

$("button").click(function(){
　　$("p").wrap("<div></div>");
});

مرجع HTML jQuery

للحصول على مرجع كامل للطرق HTML، يرجى زيارةمرجع HTML / CSS jQuery.