إضافة عناصر jQuery

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

إضافة محتوى HTML جديد

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

  • append() - إدراج محتوى في نهاية العنصر المحدد
  • prepend() - إدراج محتوى في بداية العنصر المحدد
  • after() - إدراج محتوى بعد العنصر المحدد
  • before() - إدراج محتوى قبل العنصر المحدد

طريقة jQuery append()

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

مثال

$("p").append("Some appended text.");

جرب بنفسك

طريقة jQuery prepend()

تضيف طريقة jQuery prepend() محتوى داخل العنصر المحدد في البداية.

مثال

$("p").prepend("Some prepended text.");

جرب بنفسك

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

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

لكن، يمكن لطريقة append() و prepend() استقبال عدد غير محدود من العناصر كمعاملات. يمكننا إنشاء نص/HTML باستخدام jQuery (مثل المثال السابق) أو باستخدام كود JavaScript و عناصر DOM.

في المثال التالي، نخلق عدة عناصر جديدة. يمكننا إنشاء هذه العناصر باستخدام text/HTML أو jQuery أو JavaScript/DOM. ثم نضيف هذه العناصر الجديدة إلى النص باستخدام طريقة append() (ويمكن أن تكون طريقة prepend() بنفس الطريقة):

مثال

function appendText()
{
var txt1="<p>Text.</p>";               // بإنشاء عنصر جديد باستخدام HTML
var txt2=$("<p></p>").text("Text.");   // بإنشاء عنصر جديد باستخدام jQuery
var txt3=document.createElement("p");  // إنشاء عنصر جديد باستخدام DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // إضافة عناصر جديدة
{}

جرب بنفسك

طرق after() و before() jQuery

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

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

مثال

$("img").after("Some text after");
$("img").before("Some text before");

جرب بنفسك

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

يمكن للطرق after() و before() استقبال عدد غير محدود من العناصر الجديدة كإدراج. يمكن إنشاء العناصر الجديدة من خلال text/HTML أو jQuery أو JavaScript/DOM.

في المثال التالي، نقوم بإنشاء عدد من العناصر الجديدة. يمكن إنشاء هذه العناصر من خلال text/HTML أو jQuery أو JavaScript/DOM. ثم نضيف هذه العناصر الجديدة إلى النص باستخدام طريقة after() (الطريقة before() تعمل بنفس الطريقة):

مثال

function afterText()
{
var txt1="<b>I </b>";                    // إنشاء عنصر جديد باستخدام HTML
var txt2=$("<i></i>").text("love ");     // إنشاء عنصر جديد من خلال jQuery
var txt3=document.createElement("big");  // إنشاء عنصر جديد من خلال DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // إدراج عنصر جديد بعد img
{}

جرب بنفسك

دليل مراجعة jQuery HTML

للحصول على محتوى كامل لطرق jQuery HTML، يرجى زيارة دليل المراجعة التالي: