jQuery 3.3

.insertBefore()




jquery

.insertBefore (الهدف). إرجاع: jQuery

الوصف: أدخل كل عنصر في مجموعة العناصر المتطابقة قبل الهدف.

  • الإصدار المضاف: 1.0 .inertBefore (الهدف)

    • استهداف
      النوع: Selector أو htmlString أو Element أو Array أو jQuery
      محدد أو عنصر أو مصفوفة عناصر أو سلسلة HTML أو كائن jQuery؛ سيتم إدراج مجموعة العناصر المطابقة قبل العنصر (العناصر) المحدد بواسطة هذه المعلمة.

تنفيذ أساليب .before() و .insertBefore() نفس المهمة. الاختلاف الرئيسي هو في بناء الجملة ، على وجه التحديد ، في وضع المحتوى والهدف. مع .before() ، يكون محدد المحدد الذي يسبق الطريقة هو الحاوية التي يتم قبلها إدخال المحتوى. مع .insertBefore() ، من ناحية أخرى ، يسبق المحتوى الأسلوب ، إما كتعبير محدد أو كعلامة تم إنشاؤها على الطاير ، ويتم إدراجها قبل الحاوية المستهدفة.

خذ بعين الاعتبار HTML التالية:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

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

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

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

<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

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

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

إذا تم إدراج عنصر تم اختياره بهذه الطريقة في مكان واحد في مكان آخر في DOM ، فسيتم نقله قبل الهدف (غير مستنسخ) ويتم إرجاع مجموعة جديدة تتكون من العنصر المدرج:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

إذا كان هناك أكثر من عنصر هدف واحد ، فسيتم إنشاء نسخ مستنسَخة للعنصر المدرج لكل هدف بعد الأول ، ويتم إرجاع تلك المجموعة الجديدة (العنصر الأصلي بالإضافة إلى النسخ).

قبل jQuery 1.9 ، لم تقم حالة append-to-single-element بإنشاء مجموعة جديدة ، بل قامت بدلاً من ذلك بإعادة المجموعة الأصلية التي جعلت من الصعب استخدام طريقة .end() بشكل موثوق عند استخدامها مع عدد غير معروف من العناصر.

ملاحظات إضافية:

  • حسب التصميم ، يمكن لأي منشئ jQuery أو الطريقة التي تقبل سلسلة HTML - jQuery() ، .append() ، .after() ، إلخ - تنفيذ .append() برمجية. يمكن أن يحدث هذا عن طريق حقن علامات البرنامج النصي أو استخدام سمات HTML التي تقوم بتنفيذ التعليمات البرمجية (على سبيل المثال ، <img onload=""> ). لا تستخدم هذه الطرق لإدراج سلاسل تم الحصول عليها من مصادر غير موثوقة مثل معلمات استعلام URL أو ملفات تعريف الارتباط أو مدخلات النموذج. يمكن القيام بذلك تقديم الثغرات الأمنية عبر المواقع (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 demo</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>I would like to say: </p>
 
<script>
$( "p" ).insertBefore( "#foo" );
</script>
 
</body>
</html>

عرض: