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