التابع ‎.append()‎‎‎ في jQuery

‎.append( content [, content ] )‎

القيمة المعادة

كائن jQuery.

الوصف

يُستخدَم التّابع ‎.append()‎ في إدخال المحتوى المُحدَّد عن طريق المُعامِل إلى آخر كل عنصر من مجموعة العناصر المُطابِقة.

‎.append( content [, content ] )‎

أضيفت في الإصدار: 1.0.

content

سلسلة نصيّة من الكائن htmlString، أو عنصر، أو نص، أو مصفوفة، أو jQuery، وتُمثِّل سلسلة html، أو عنصر DOM، أو عقدة نصيّة (text node)، أو مصفوفة من العناصر والعقد النصيّة، أو كائن jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة.

content

سلسلة نصيّة من الكائن htmlString، أو عنصر، أو نص، أو مصفوفة، أو jQuery، وتُمثِّل عنصرًا إضافيًا واحدًا أو أكثر من عناصر DOM، أو العقد النصيّة (text node)، أو مصفوفات من العناصر والعقد النصية، أو سلسلة html، أو كائنات jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة.

‎.append( function )‎

أضيفت في الإصدار: 1.4.

function

دالة على الشكل Function( Integer index, String html )‎ تُعيد سلسلة نصيّة من الكائن htmlString، أو عنصر أو عناصر DOM، أو عقدة أو عقد نصيّة، أو كائن jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة. يُمثِّل المعاملُ this العنصرَ الحالي. تستقبل فهرس موقع العنصر في المجموعة وقيمة html القديمة للعنصر كوسائط لها.

يُدخِل التّابع ‎.append()‎ المحتوى المُحدَّد كآخر ابن (last child) لكل عنصر من مجموعة jQuery (لإدخاله كأول ابن استخدم التّابع ‎.prepend()‎).

ينجز التّابعان ‎.append()‎ و ‎.appendTo()‎ نفس المهمة ويكمن الفرق الأساسي بينهما في الصّياغة، أي في مكان تحديد المحتوى والعناصر الهدف، فبالنسبة للتابع ‎.append()‎ يُشير تعبير المُحدِّد (Selector) الذي يسبق التّابع إلى الحاوية التي سيُدخَل إليها المحتوى، أما في التّابع ‎‎.appendTo()‎ يسبق المحتوى التّابع إمّا كتعبير مُحدِّد أو كعناصر HTML مُنشأة بشكل مباشر، ويُدخَل إلى الحاوية الهدف.

فلنأخذ مثال HTML التالي:

<h2>تحيّات</h2>
<div class="container">
  <div class="inner">مرحبًا</div>
  <div class="inner">وداعًا</div>
</div>

بإمكاننا إنشاء المحتوى وإدخاله إلى عناصر متعدّدة بنفس الوقت:

$( ".inner" ).append( "<p>Test</p>" );

سيحصل كل عنصر <div> على المحتوى الجديد:

<h2>تحيّات</h2>
<div class="container">
  <div class="inner">
    مرحبًا
    <p>Test</p>
  </div>
  <div class="inner">
    وداعًا
    <p>Test</p>
  </div>
</div>

بإمكاننا أيضًا تحديد عنصر من الصفحة وإدخاله إلى عنصر آخر:

$( ".container" ).append( $( "h2" ) );

إن أدخلنا عنصرًا مختارًا بهذه الطريقة إلى موقع واحد في أي مكان من DOM، فسينتقل إلى العنصر الهدف (ولن يُنسَخ):

<div class="container">
  <div class="inner">مرحبًا</div>
  <div class="inner">وداعًا</div>
  <h2>تحيّات</h2>
</div>

ملاحظة هامة: إن كان هنالك أكثر من عنصر هدف، فستُنشَأ نسخة من العنصر المُدخَل لكل عنصر هدف ما عدا العنصر الأخير.

وسائط إضافيّة

كما هو الحال مع توابع إضافة المحتوى الأخرى مثل ‎.prepend()‎ و ‎.before()‎، يدعم التّابع ‎.append()‎ تمرير وسائط متعدّة كمُدخلات.