.append (), prepend (), .after () और .before ()

205

मैं कोडिंग के साथ बहुत कुशल हूं, लेकिन अब और फिर मुझे कोड आता है जो मूल रूप से एक ही काम करता है। यहाँ मेरा मुख्य प्रश्न यह है कि आप इसके .append()बजाय .after()या इसके छंदों का उपयोग क्यों करेंगे ?

मैं देख रहा हूं और दोनों के बीच के अंतरों की स्पष्ट परिभाषा और उन्हें कब और कैसे इस्तेमाल करना है, इसका स्पष्ट पता नहीं लग सकता है।

एक के ऊपर दूसरे के क्या लाभ हैं और मैं भी एक के बजाय दूसरे का उपयोग क्यों करूंगा ?? क्या कोई मुझसे इसकी व्याख्या करेगा?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

— Epik
स्रोत

2

मैं कभी भी उपयोग नहीं करता हूं append(जो उपयोग करें?) बग्स का उपयोग करें, मैं उपयोग appendToकरता हूं जो कि अलसमोर को सही रूप से सही लगता है क्योंकि विशेष रूप से वहाँ after(श्रृंखला श्रृंखला श्रृंखला) - नायब: afterभीतर नहीं है

— मिकाकुन

लगता है कि आप वास्तव में क्या जानना चाहते हैं यही कारण है कि एक ही परिणाम प्राप्त करने के बाद परिशिष्ट बनाम चुनना क्यों है। मान लें कि आपके पास <div class = 'a'> <p class = 'b'> </ p> </ div> है। तब $ ('। a')। अपेंडेंड ('हैलो') का $ ('। B') के समान प्रभाव होगा। ('हैलो')। अर्थात्: <div class = 'a'> <p class = 'b'> </ p> 'हैलो' </ div>। उस मामले में, इससे कोई फर्क नहीं पड़ता। परिणामी HTML एक समान है, इसलिए अपने कोड में निर्माण के लिए चयनकर्ता सबसे सुविधाजनक है, इसके आधार पर या उसके बाद चयन करें।

— tgoneil

446

देख:

.append()एक तत्व के अंदर डेटा डालता है last indexऔर पहले
.prepend()से मौजूद एलएम पर डालता हैfirst index

मान लीजिए:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

जब `.append()`निष्पादित होता है तो यह इस तरह दिखेगा:

$('.a').append($('.c'));

निष्पादन के बाद:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

निष्पादन में .append () के साथ फिडेल।

जब `.prepend()`निष्पादित होता है तो यह इस तरह दिखेगा:

$('.a').prepend($('.c'));

निष्पादन के बाद:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

निष्पादन में .prepend () के साथ फ़ेल्ड।

.after()तत्व
.before()डालने से पहले तत्व डालता है

उपयोग करने के बाद:

$('.a').after($('.c'));

निष्पादन के बाद:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

निष्पादन में .after () के साथ फिडेल।

पहले का उपयोग:

$('.a').before($('.c'));

निष्पादन के बाद:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

निष्पादन में .before () के साथ फ़ेल्ड।

— जय
स्रोत

1

@joraid ने अपनी टिप्पणी के अनुसार उत्तर को अपडेट किया, निष्पादन में कुछ js फ़िडल लिंक के साथ।

— जय

1

महान स्पष्टीकरण, लेकिन क्या होगा अगर मैं बाहरी HTML दृश्य में लोड करना चाहता हूं? एमवीसी का इस तरह उपयोग करना:$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });

— जीरोवेन

4

@ डजरीन .append()उसे इस तरह लोड नहीं करेगी। आपको उपयोग करना होगा .load(url, params)।

— जय

1

अच्छा! क्या मैं '$ (तत्व) .append (सामग्री)' और '$ (सामग्री) .appendTo (लक्ष्य)' और इस तरह के बीच के अंतर के बारे में भी पूछ सकता हूँ? (मैं इसमें एक नया सूत्र शुरू नहीं करना चाहता!)

— अपोस्टोलोस

135

इस छवि के नीचे प्रदर्शित एक स्पष्ट समझ देता है और के बीच सटीक अंतर से पता चलता .append(), .prepend(), .after()और.before()

jQuery इन्फोग्राफिक

आप छवि है कि से देख सकते हैं .append()और .prepend()के रूप में नए तत्व कहते हैं बच्चे तत्वों (भूरे रंग का) लक्षित करने के लिए।

और .after()और .before()के रूप में नए तत्व कहते हैं भाई तत्वों (काले रंग) लक्षित करने के लिए।

यहाँ बेहतर समझ के लिए एक डेमो है ।

संपादित करें: उन कार्यों के फ़्लिप किए गए संस्करण:

इस कोड का उपयोग करना :

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

इस लक्ष्य पर:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

इसलिए हालांकि ये फ़ंक्शन पैरामीटर ऑर्डर को फ्लिप करते हैं, प्रत्येक एक ही तत्व नेस्टिंग बनाता है:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

... लेकिन वे एक अलग तत्व लौटाते हैं। यह विधि जंजीर के लिए मायने रखता है ।

— VSri58
स्रोत

2

बहुत आसानी से समझ में आने वाली तस्वीर। :)

— अब्दुल हमीद

Upvoted! अगर मैं पूछता हूँ तो चित्र में appendTo और prependTo के बारे में क्या? कृपया अद्यतन करें।

— ब्रेस्ट देव 7

मैं आपके इन्फोग्राफिक का जिक्र करता रहता हूं। आशा है कि आप फ़्लिप किए गए फ़ंक्शंस को जोड़ना पसंद करेंगे।

— बॉब स्टीन

37

append()और prepend()एक तत्व के अंदर सामग्री डालने के लिए (सामग्री अपने बच्चे को बनाने) है, जबकि after()और before()एक तत्व के बाहर सामग्री डालने (सामग्री अपने भाई बनाते हुए)।

— alijsh
स्रोत

19

सबसे अच्छा तरीका प्रलेखन के लिए जा रहा है।

`.append()` बनाम `.after()`

। append(): सम्मिलित तत्वों के सेट में प्रत्येक तत्व के अंत तक , पैरामीटर द्वारा निर्दिष्ट सामग्री डालें ।
। after(): सम्मिलित तत्व के सेट में प्रत्येक तत्व के बाद , पैरामीटर द्वारा निर्दिष्ट सामग्री डालें ।

`.prepend()` बनाम `.before()`

prepend(): सम्मिलित तत्वों के सेट में प्रत्येक तत्व की शुरुआत के लिए , पैरामीटर द्वारा निर्दिष्ट सामग्री डालें ।
। before(): सम्मिलित तत्वों के सेट में प्रत्येक तत्व से पहले , पैरामीटर द्वारा निर्दिष्ट सामग्री डालें ।

इसलिए, अपेंड और प्रीपेंड ऑब्जेक्ट के बच्चे को संदर्भित करता है, जबकि बाद में और ऑब्जेक्ट के भाई को संदर्भित करता है।

— आयनिक बिज़ुआ
स्रोत

9

वहाँ के बीच एक बुनियादी अंतर नहीं है .append()और .after()और .prepend()और .before()।

.append()चयनकर्ता तत्व के टैग के अंदर पैरामीटर तत्व को बहुत अंत में .after()जोड़ता है जबकि तत्व के टैग के बाद पैरामीटर तत्व जोड़ता है ।

इसके विपरीत .prepend()और के लिए है .before()।

बेला

— I_Debug_Everything
स्रोत

5

उनमें से प्रत्येक के लिए कोई अतिरिक्त लाभ नहीं है। यह पूरी तरह से आपके परिदृश्य पर निर्भर करता है। नीचे दिया गया कोड उनके अंतर को दर्शाता है।

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

— Code.Town
स्रोत

5

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>

— नैट
स्रोत

3

एक पेड़ के रूप में DOM (HTML पेज) की कल्पना करें । HTML तत्व इस पेड़ के नोड हैं।

उस append()नोड पर एक नया नोड जोड़ता है childजिसे आपने इसे कहा था।

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

after()एक भाई के रूप में या एक ही स्तर या नोड आप उस पर कहा जाता है की माता पिता से बच्चे को एक नए नोड कहते हैं।

— अनु
स्रोत

3

कोशिश करें और अपने मुख्य प्रश्न का उत्तर दें :

आप (।) के बाद .append () का उपयोग क्यों करेंगे (या इसके विपरीत?

जब आप DOM को jquery के साथ जोड़तोड़ कर रहे हैं तो आपके द्वारा उपयोग किए जाने वाले तरीके आपके इच्छित परिणाम पर निर्भर करते हैं और सामग्री को बदलने के लिए एक लगातार उपयोग होता है।

.remove()सामग्री को बदलने के लिए आप सामग्री चाहते हैं और इसे नई सामग्री से बदल सकते हैं। यदि आप .remove()मौजूदा टैग और फिर उपयोग करने का प्रयास करते हैं तो .append()यह काम नहीं करेगा क्योंकि टैग स्वयं हटा दिया गया है, जबकि यदि आप उपयोग करते हैं .after(), तो नई सामग्री को (अब हटाए गए) टैग के बाहर जोड़ा जाता है और पिछले से प्रभावित नहीं होता है .remove()।

— माइकल डुरंट
स्रोत

.append (), prepend (), .after () और .before ()

देख:

मान लीजिए:

जब .append()निष्पादित होता है तो यह इस तरह दिखेगा:

निष्पादन में .append () के साथ फिडेल।

जब .prepend()निष्पादित होता है तो यह इस तरह दिखेगा:

निष्पादन में .prepend () के साथ फ़ेल्ड।

उपयोग करने के बाद:

निष्पादन में .after () के साथ फिडेल।

पहले का उपयोग:

निष्पादन में .before () के साथ फ़ेल्ड।

.append() बनाम .after()

.prepend() बनाम .before()

कोशिश करें और अपने मुख्य प्रश्न का उत्तर दें :

आप (।) के बाद .append () का उपयोग क्यों करेंगे (या इसके विपरीत?

जब `.append()`निष्पादित होता है तो यह इस तरह दिखेगा:

जब `.prepend()`निष्पादित होता है तो यह इस तरह दिखेगा:

`.append()` बनाम `.after()`

`.prepend()` बनाम `.before()`