jQuery 3.3

.prepend()




jquery

.prepend (محتوى [، محتوى]) إرجاع: jQuery

الوصف: أدخل المحتوى ، المحدد بواسطة المعلمة ، إلى بداية كل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضاف: 1.0 .prepend (محتوى [، محتوى])

    • يحتوى
      النوع: htmlString أو Element أو Text أو Array أو jQuery
      عنصر DOM ، أو عقدة نص ، أو مجموعة من العناصر ، أو عقد نصية ، أو سلسلة HTML ، أو كائن jQuery لإدراجه في بداية كل عنصر في مجموعة العناصر المتطابقة.
    • يحتوى
      النوع: htmlString أو Element أو Text أو Array أو jQuery
      عنصر واحد أو أكثر من عناصر DOM الإضافية أو عقد النص أو صفائف العناصر وعقد النص أو سلاسل HTML أو كائنات jQuery لإدراجها في بداية كل عنصر في مجموعة العناصر المتطابقة.
  • الإصدار المضاف: 1.4 .prepend (وظيفة)

    • وظيفة
      النوع: Function ( Integer elementOfArray، String html) => htmlString أو Element أو Text أو jQuery
      دالة تقوم بإرجاع سلسلة HTML أو عنصر (عناصر) DOM أو عقدة (أو) نصوص أو كائن jQuery لإدراجه في بداية كل عنصر في مجموعة العناصر المتطابقة. يستقبل موضع فهرس العنصر في المجموعة وقيمة HTML القديمة للعنصر كوسيط. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.

تقوم .prepend() بإدراج المحتوى المحدد كالطفل الأول لكل عنصر في مجموعة jQuery ( .append() كطفل آخر ، استخدم .append() ).

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

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

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

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

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

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

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

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

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

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

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

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

الحجج الإضافية

كما هو الحال مع أساليب إضافة المحتوى الأخرى مثل .append() و .before() ، .prepend() أيضًا تمرير وسيطات متعددة كمدخلات. تتضمن المدخلات المدعومة عناصر DOM ، وعناصر jQuery ، وسلاسل HTML ، ومصفوفات عناصر DOM.

على سبيل المثال ، سوف يُدرج التالي جهازي <div> و <div> جديدين كالعقد الثلاث الأولى من الجسم:

var $newdiv1 = $( "<div id='object1'></div>"),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).prepend( $newdiv1, [ newdiv2, existingdiv1 ] );

بما أن .prepend() يمكن أن يقبل أي عدد من الوسيطات الإضافية ، فإن النتيجة نفسها يمكن تحقيقها بالتمرير في ثلاث <div> s $( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 ) وسيطات منفصلة ، مثل: $( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 ) . يعتمد نوع وسيطة الوسائط إلى حد كبير على كيفية جمع العناصر في شفرتك.

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

  • حسب التصميم ، يمكن لأي منشئ jQuery أو الطريقة التي تقبل سلسلة HTML - jQuery() ، .append() ، .after() ، إلخ - تنفيذ .append() برمجية. يمكن أن يحدث هذا عن طريق حقن علامات البرنامج النصي أو استخدام سمات HTML التي تقوم بتنفيذ التعليمات البرمجية (على سبيل المثال ، <img onload=""> ). لا تستخدم هذه الطرق لإدراج سلاسل تم الحصول عليها من مصادر غير موثوقة مثل معلمات استعلام URL أو ملفات تعريف الارتباط أو مدخلات النموذج. يمكن القيام بذلك تقديم الثغرات الأمنية عبر المواقع (XSS). أزل أو تخلص من أي إدخال للمستخدم قبل إضافة محتوى إلى المستند.
  • jQuery لا يدعم SVG رسميًا. باستخدام أساليب jQuery على مستندات SVG ، ما لم يتم توثيقها صراحةً لهذه الطريقة ، قد يتسبب في حدوث سلوكيات غير متوقعة. من أمثلة الطرق التي تدعم SVG اعتبارًا من jQuery 3.0 هي addClass و removeClass .

أمثلة:

يؤلف بعض HTML لجميع الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>there, friend!</p>
<p>amigo!</p>
 
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 
</body>
</html>

عرض:

يضيف عنصر DOM إلى كل الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>is what I'd say</p>
<p>is what I said</p>
 
<script>
$( "p" ).prepend( document.createTextNode( "Hello " ) );
</script>
 
</body>
</html>

عرض:

يُعد كائن jQuery (مشابهًا لمجموعة عناصر DOM) لجميع الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p> is what was said.</p><b>Hello</b>
 
<script>
$( "p" ).prepend( $( "b" ) );
</script>
 
</body>
</html>

عرض: