jQuery: ما هو الفرق بين بعد () وإدراج ()

Question

jQuery لديه .after() الطريقة، وكذلك .insertAfter() طريقة.

ما الفرق بينهما؟ أعتقد أنني أستطيع استخدام .after() لإدراج عناصر بعد عنصر محدد (أو عناصر). هل هذا صحيح؟ ما هى .insertAfter() بالنسبة؟

Answer 1

هم الأضداد المتبادلة.

'بعدإدراج الوسيطة بعد المحدد.

'إدراجإدراج محدد بعد الوسيطة.

هنا مثال على نفس الشيء الذي تم القيام به مع:

إدراج ():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertAfter( ".inner" );
Each inner <div> element gets this new content:
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

بعد():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );

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

Answer 2

إنهم يتخللون من بعضهم البعض. كما هو موضح في جيس توثيق:

هذه:

$("p").insertAfter("#foo");

هو نفسه كما يلي:

$("#foo").after("p");

وأخيرا، إرجاع إدراج جميع العناصر المدرجة، في حين أن. بعد. بعد () سيعود السياق يسمى.

Answer 3

جميع الإجابات حتى الآن واضحة مثل الوحدة ؛-) (لذلك سوف تأخذ طعنة في ذلك أيضا!)

إذا بدأت مع هذا HTML:

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

بعد إدراج بعض الجديد المحتوى بعد مطابقة العلامات:

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

النتيجة النهائية هي:

<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

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

$("#sMore")                    // Find the element with id `sMore`
    .insertAfter("#pOne");     // Move it to paragraph one

مما يسبب:

<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>

Answer 4

( بعد قبل ):

$('selector').after('new_content');
$('selector').before('new_content');

بينما (insertafter & insertBefore):

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

Answer 5

$("p").insertAfter("#foo");

==

$("#foo").after("p")

Answer 6

افحص ال توثيق:

$("#foo").after("p")

بالضبط مثل:

$("p").insertAfter("#foo");

Answer 7

بعد (المحتوى) إرجاع: jQuery

أدخل المحتوى بعد كل عنصر من العناصر المتطابقة.

إرجاع (محدد) إرجاع: jQuery

أدخل جميع العناصر المتطابقة بعد آخر، محددة، مجموعة من العناصر.

Answer 8

يبدو أيضا أن سمات النجاح للعنصر المدرج لا يعمل مع ".insertafter"، ولكن يعمل مع ". بعد"

يعمل:

$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

لا يعمل:

$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

* تحرير: يبدو أنه لا يعمل مع ". بعد" لا، ولكن فقط مع ".Appendto"

Answer 9

هنا يمكنك العثور على برنامج تعليمي جيد جدا لكيفية إضافة محتوى إلى صفحة باستخدام أساليب مسج الإعداد ()، والضغط ()، وإلحاق ()، appendto ()، قبل ()، rettlebefore ()، بعد ()، إدراج ()، إدراج () )، التفاف ()، التفاف () و التفاف ()

Answer 10

بعد() و إدراج () كلاهما يلفظ عنصر، سيأتي التغيير الرئيسي للسلاسل

في after() أنت إلهي العنصر الجديد بعد المحدد الخاص بك ثم إذا كنت تستخدم سلسلة للعنصر، فستطلق أي وظيفة تستخدمها على selector ليس على العنصر المضافة حديثا، وسوف يؤدي العكس insertAfter() التي سيتم تنفيذ المخزئة على العنصر المضافة حديثا على سبيل المثال،

بعد() و إدراج ()

لغة البرمجة

<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>

النصي

var p='<p>Lorem ipsum doner inut..</p>';
$('.after').after(p)//chaining, performed on .after div not on p
           .css('backgroundColor','pink');
           //you can chain more functions for .after here


$(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div
    .css('backgroundColor','yellow');
    // here you can chain more functions for newly added element(p)

انظر فوق selector و contents تتغير في كلا الوظيفين. سيتم تطبيق نفسه على قائمة التالية:

1. قبل () vs insertbefore ()
2. إلحاق () vs appendto ()
3. Prepend () VS Prependto ()
4. وبعد () vs insertafter ()، من الواضح.

عرض حي

إذا كنت تريد أن ترى كل من الأداء الحكيم after() أسرع من ذلك insertAfter() يرى بعد-vs-insertafter أداء.

Answer 11

بعض الأشياء المهمة تفصل بعض بناء الجملة هي تسرب الذاكرة والأداء. Insertafter أكثر كفاءة من إدراج عندما يكون لديك الكثير من عناصر DOM. لذلك تفضل إدراجها بدلا من ذلك.