jQuery 3.3

.append()




jquery

.append (content [، content]) الإرجاع: jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بما أن .append() يمكن أن يقبل أي عدد من الوسيطات الإضافية ، فإن النتيجة نفسها يمكن تحقيقها بالتمرير في ثلاث <div> s $('body').append( $newdiv1, newdiv2, existingdiv1 ) وسيطات منفصلة ، مثل: $('body').append( $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>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
 
</body>
</html>

عرض:

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

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

عرض:

يقوم بإلحاق كائن jQuery (مشابه لـ Array of DOM Elements) بكافة الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
 
<script>
$( "p" ).append( $( "strong" ) );
</script>
 
</body>
</html>

عرض: