jQuery 3.3

.appendTo()




jquery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</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" (التحقق من التذييل () لمزيد من الأمثلة)

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

عرض: