التابع .appendTo() في jQuery
.appendTo( target )
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التّابع .appendTo() في إدخال كل عنصر من مجموعة العناصر المُطابِقة إلى نهاية العنصر الهدف.
.appendTo( target )
أضيفت في الإصدار: 1.0.
target
مُحدِّد (Selector) أو سلسلة نصيّة من الكائن htmlString أو عنصر أو مصفوفة أو كائن jQuery، وتُمثِّل مجموعة العناصر المُطابِقة التي ستُدخَل إلى نهاية العنصر أو العناصر المُحدَّدة عن طريق هذا المُعامِل.
ينجز التّابعان .append() و .appendTo() نفس المهمة ويكمن الفرق الأساسي بينهما في الصّياغة، أي في مكان تحديد المحتوى والعناصر الهدف، فبالنسبة للتابع .append() يُشير تعبير المُحدِّد (selector) الذي يسبق التّابع إلى الحاوية التي سيُدخَل إليها المحتوى، أما في التّابع .appendTo() يسبق المحتوى التّابع إمّا كتعبير مُحدِّد أو كعناصر HTML مُنشأة بشكل مباشر، ويُدخَل إلى الحاوية الهدف.
فلنأخذ مثال HTML التالي:
<h2>تحيّات</h2>
<div class="container">
<div class="inner">مرحبًا</div>
<div class="inner">وداعًا</div>
</div>
بإمكاننا إنشاء المحتوى وإدخاله إلى عناصر متعدّدة بنفس الوقت:
$( "<p>تجربة</p>" ).appendTo( ".inner" );
سيحصل كل عنصر <div> على المحتوى الجديد:
<h2>تحيّات</h2>
<div class="container">
<div class="inner">
مرحبًا
<p>تجربة</p>
</div>
<div class="inner">
وداعًا
<p>تجربة</p>
</div>
</div>
بإمكاننا أيضًا تحديد عنصر من الصفحة وإدخاله إلى عنصر آخر:
$( "h2" ).appendTo( $( ".container" ) );
إن أدخلنا عنصرًا مختارًا بهذه الطريقة إلى موقع واحد في أي مكان من DOM، فسينتقل إلى العنصر الهدف (ولن يُنسَخ):
<div class="container">
<div class="inner">مرحبًا</div>
<div class="inner">وداعًا</div>
<h2>تحيّات</h2>
</div>
إن كان هنالك أكثر من عنصر هدف، فستُنشَأ نسخة من العنصر المُدخَل لكل عنصر هدف ما عدا العنصر الأخير، وتُعاد المجموعة الجديدة (وهي العناصر الأصليّة مع النسخ).
قبل إصدار jQuery 1.9 لم يكن الإدخال إلى عنصر وحيد يُنشِئ مجموعة جديدة، بل يُعيد المجموعة الأصليّة ممّا كان يُصعِّب استخدام التّابع .end() بشكل فعّال مع عناصر غير معروفة العدد.
ملاحظات إضافيّة
- من تصميم jQuery أنّ الدوال البانية والتوابع الخاصّة بها والتي تقبل سلاسل HTML نصيّة - مثل
jQuery()، وappend().، و .after() - تملك القدرة على تنفيذ أي شيفرة، قد يحدث هذا عن طريق حقن العنصر<script>أو استخدام خاصيّات HTML التي تُنفِّذ الشيفرة (مثل <img onload="">). لا تستخدم هذه التّوابع لإدخال سلاسل نصيّة قادمة من مصادر غير موثوقة مثل مُعامِلات استعلام الرّوابط (URL query parameters)، أو الكعكات (cookies)، أو حقول الإدخال. يُؤدِّي فعل ذلك إلى ثغرات من نوع cross-site-scripting (اختصارًا XSS). قم بعمل إزالة أو تهريب للمحارف (escape) المُدخَلة بواسطة المستخدم قبل إضافة المحتوى للمستند. - لا تدعم jQuery بشكل رسمي مستندات SVG، وقد يُسبِّب استخدام توابع jQuery على مستندات SVG سلوكًا غير متوقع ما لم يكن ذلك مذكورًا في توثيق التّابع. من الأمثلة على توابع تدعم SVG بدءًا من إصدار jQuery 3.0 التّابع
addClassوremoveClass.
أمثلة
إضافة كافّة عناصر <span> إلى العنصر الذي يمتلك المُعرِّف "foo" (انظر إلى توثيق .append() للمزيد من الأمثلة):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>appendTo مثال عن</title>
<style>
#foo {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span>لا أملك شيئًا آخر لأقوله...</span>
<div id="foo">FOO! </div>
<script>
$( "span" ).appendTo( "#foo" );
</script>
</body>
</html>