الفرق بين المراجعتين لصفحة: «jQuery/appendTo»
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
ط استبدال النص - 'JQuery' ب'jQuery' |
||
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
==<code>.appendTo( target )</code>== | |||
== <code>.appendTo( target )</code> == | |||
===القيمة المعادة=== | ===القيمة المعادة=== | ||
كائن [[jQuery/jQuery|jQuery]]. | كائن [[jQuery/jQuery|jQuery]]. | ||
===الوصف=== | ===الوصف=== | ||
يُستخدَم التّابع <code>.appendTo()</code> في إدخال كل عنصر من مجموعة العناصر المُطابِقة إلى نهاية العنصر الهدف. | يُستخدَم التّابع <code>.appendTo()</code> في إدخال كل عنصر من مجموعة العناصر المُطابِقة إلى نهاية العنصر الهدف. | ||
===<code>.appendTo( target )</code>=== | |||
=== <code>.appendTo( target )</code> === | |||
أضيفت في الإصدار: 1.0. | أضيفت في الإصدار: 1.0. | ||
====<code>target</code>==== | |||
==== <code>target</code> ==== | مُحدِّد (Selector) أو [[JavaScript/String|سلسلة نصيّة من الكائن htmlString]] أو [[JavaScript/Element|عنصر]] أو [[JavaScript/Array|مصفوفة]] أو كائن [[jQuery/jQuery|jQuery]]، وتُمثِّل مجموعة العناصر المُطابِقة التي ستُدخَل إلى نهاية العنصر أو العناصر المُحدَّدة عن طريق هذا المُعامِل. | ||
ينجز التّابعان <code>[[jQuery/append|.append()]]</code> و <code>.appendTo()</code> نفس المهمة ويكمن الفرق الأساسي بينهما في الصّياغة، أي في مكان تحديد المحتوى والعناصر الهدف، فبالنسبة للتابع <code>.append()</code> يُشير تعبير المُحدِّد (selector) الذي يسبق التّابع إلى الحاوية التي سيُدخَل إليها المحتوى، أما في التّابع <code>.appendTo()</code> يسبق المحتوى التّابع إمّا كتعبير مُحدِّد أو كعناصر HTML مُنشأة بشكل مباشر، ويُدخَل إلى الحاوية الهدف. | ينجز التّابعان <code>[[jQuery/append|.append()]]</code> و <code>.appendTo()</code> نفس المهمة ويكمن الفرق الأساسي بينهما في الصّياغة، أي في مكان تحديد المحتوى والعناصر الهدف، فبالنسبة للتابع <code>.append()</code> يُشير تعبير المُحدِّد (selector) الذي يسبق التّابع إلى الحاوية التي سيُدخَل إليها المحتوى، أما في التّابع <code>.appendTo()</code> يسبق المحتوى التّابع إمّا كتعبير مُحدِّد أو كعناصر HTML مُنشأة بشكل مباشر، ويُدخَل إلى الحاوية الهدف. | ||
سطر 47: | سطر 42: | ||
قبل إصدار jQuery 1.9 لم يكن الإدخال إلى عنصر وحيد يُنشِئ مجموعة جديدة، بل يُعيد المجموعة الأصليّة ممّا كان يُصعِّب استخدام التّابع <code>.end()</code> بشكل فعّال مع عناصر غير معروفة العدد. | قبل إصدار jQuery 1.9 لم يكن الإدخال إلى عنصر وحيد يُنشِئ مجموعة جديدة، بل يُعيد المجموعة الأصليّة ممّا كان يُصعِّب استخدام التّابع <code>.end()</code> بشكل فعّال مع عناصر غير معروفة العدد. | ||
=== | ===ملاحظات إضافيّة=== | ||
*من تصميم jQuery أنّ الدوال البانية والتوابع الخاصّة بها والتي تقبل سلاسل HTML نصيّة - مثل <code>[[ | *من تصميم jQuery أنّ الدوال البانية والتوابع الخاصّة بها والتي تقبل سلاسل HTML نصيّة - مثل <code>[[jQuery/jQuery|jQuery()]]</code>، و <code>[[jQuery/append|append().]]</code>، و <code>[[jQuery/after|.after()]]</code> - تملك القدرة على تنفيذ أي شيفرة، قد يحدث هذا عن طريق حقن العنصر <code>[[HTML/script|<script>]]</code> أو استخدام خاصيّات HTML التي تُنفِّذ الشيفرة (مثل <code><img onload=""></code>). لا تستخدم هذه التّوابع لإدخال سلاسل نصيّة قادمة من مصادر غير موثوقة مثل مُعامِلات استعلام الرّوابط (URL query parameters)، أو الكعكات (cookies)، أو حقول الإدخال. يُؤدِّي فعل ذلك إلى ثغرات من نوع cross-site-scripting (اختصارًا XSS). قم بعمل إزالة أو تهريب للمحارف (escape) المُدخَلة بواسطة المستخدم قبل إضافة المحتوى للمستند. | ||
*لا تدعم jQuery بشكل رسمي مستندات SVG، وقد يُسبِّب استخدام توابع jQuery على مستندات SVG سلوكًا غير متوقع ما لم يكن ذلك مذكورًا في توثيق التّابع. من الأمثلة على توابع تدعم SVG بدءًا من إصدار jQuery 3.0 التّابع <code>addClass</code> و <code>removeClass</code>. | *لا تدعم jQuery بشكل رسمي مستندات SVG، وقد يُسبِّب استخدام توابع jQuery على مستندات SVG سلوكًا غير متوقع ما لم يكن ذلك مذكورًا في توثيق التّابع. من الأمثلة على توابع تدعم SVG بدءًا من إصدار jQuery 3.0 التّابع <code>addClass</code> و <code>removeClass</code>. | ||
===أمثلة=== | |||
=== أمثلة === | إضافة كافّة عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> إلى العنصر الذي يمتلك المُعرِّف <code>"foo"</code> (انظر إلى توثيق <code>[[jQuery/append|.append()]]</code> للمزيد من الأمثلة):<syntaxhighlight lang="html"> | ||
إضافة كافّة عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> إلى العنصر الذي يمتلك المُعرِّف "foo" (انظر إلى توثيق <code>[[jQuery/append|.append()]]</code> للمزيد من الأمثلة):<syntaxhighlight lang="html"> | |||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
سطر 67: | سطر 61: | ||
<body> | <body> | ||
<span>لا أملك | <span>لا أملك شيئًا آخر لأقوله...</span> | ||
<div id="foo">FOO! </div> | <div id="foo">FOO! </div> | ||
سطر 80: | سطر 74: | ||
== مصادر== | == مصادر== | ||
*<span> </span>[http://api.jquery.com/appendTo/ صفحة التابع .appendTo() في توثيق jQuery الرسمي]. | *<span> </span>[http://api.jquery.com/appendTo/ صفحة التابع .appendTo() في توثيق jQuery الرسمي].<noinclude>{{DISPLAYTITLE:التابع <code>.appendTo()</code> في jQuery}}</noinclude> | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Manipulation]] | [[تصنيف:jQuery Manipulation]] |
المراجعة الحالية بتاريخ 09:21، 24 يونيو 2018
.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>