الفرق بين المراجعتين ل"jQuery/appendTo"
Kinan-mawed (نقاش | مساهمات) ط |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 15: | سطر 15: | ||
ينجز التّابعان <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 مُنشأة بشكل مباشر، ويُدخَل إلى الحاوية الهدف. | ||
| + | |||
| + | فلنأخذ مثال HTML التالي:<syntaxhighlight lang="html"> | ||
| + | <h2>تحيّات</h2> | ||
| + | <div class="container"> | ||
| + | <div class="inner">مرحبًا</div> | ||
| + | <div class="inner">وداعًا</div> | ||
| + | </div> | ||
| + | </syntaxhighlight>بإمكاننا إنشاء المحتوى وإدخاله إلى عناصر متعدّدة بنفس الوقت:<syntaxhighlight lang="javascript"> | ||
| + | $( "<p>تجربة</p>" ).appendTo( ".inner" ); | ||
| + | </syntaxhighlight>سيحصل كل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> على المحتوى الجديد:<syntaxhighlight lang="html"> | ||
| + | <h2>تحيّات</h2> | ||
| + | <div class="container"> | ||
| + | <div class="inner"> | ||
| + | مرحبًا | ||
| + | <p>تجربة</p> | ||
| + | </div> | ||
| + | <div class="inner"> | ||
| + | وداعًا | ||
| + | <p>تجربة</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </syntaxhighlight>بإمكاننا أيضًا تحديد عنصر من الصفحة وإدخاله إلى عنصر آخر:<syntaxhighlight lang="javascript"> | ||
| + | $( "h2" ).appendTo( $( ".container" ) ); | ||
| + | </syntaxhighlight>إن أدخلنا عنصرًا مختارًا بهذه الطريقة إلى موقع واحد في أي مكان من DOM، فسينتقل إلى العنصر الهدف (ولن يُنسَخ):<syntaxhighlight lang="html"> | ||
| + | <div class="container"> | ||
| + | <div class="inner">مرحبًا</div> | ||
| + | <div class="inner">وداعًا</div> | ||
| + | <h2>تحيّات</h2> | ||
| + | </div> | ||
| + | </syntaxhighlight>إن كان هنالك أكثر من عنصر هدف، فستُنشَأ نسخة من العنصر المُدخَل لكل عنصر هدف ما عدا العنصر الأخير، وتُعاد المجموعة الجديدة (وهي العناصر الأصليّة مع النسخ). | ||
| + | |||
| + | قبل إصدار jQuery 1.9 لم يكن الإدخال إلى عنصر وحيد يُنشِئ مجموعة جديدة، بل يُعيد المجموعة الأصليّة ممّا كان يُصعِّب استخدام التّابع <code>.end()</code> بشكل فعّال مع عناصر غير معروفة العدد. | ||
مراجعة 10:42، 14 مايو 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() بشكل فعّال مع عناصر غير معروفة العدد.