jQuery 3.3

.prependTo()




jquery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال:

قم بإعداد كافة الامتدادات للعنصر مع المعرف "foo" (راجع وثائق .prepend () لمزيد من الأمثلة)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prependTo demo</title>
  <style>
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

عرض: