Eu sunt destul de competenți, cu codificare, dar acum și apoi am venit peste cod care pare de-a face în esență același lucru. Principala mea întrebare este, de ce ai folosi .append()
mai degrabă decât .după()
sau vice versete?
Am fost în căutarea și nu pot par să găsească o definiție clară a diferențelor între cele două și când să le folosească și când nu.
Care sunt beneficiile de unul peste celălalt și, de asemenea, de ce aș folosi mai degrabă una apoi alta?? Poate cineva vă rog să-mi explici asta?
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);
});
.append()
pune datele în interiorul unui element la ultimul indice și
.prefixeaza()
pune precedarea elem la primul index`
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
.append()
execută se va arata astfel:$('.a').append($('.c'));
după execuție:
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>
.prefixeaza()
execută se va arata astfel:$('.a').prepend($('.c'));
după execuție:
<div class='a'> //<---you want div c to append in this
<div class='c'>c</div>
<div class='b'>b</div>
</div>
.după()
pune element după element
.înainte de a()
pune element înaintea elementului
$('.a').after($('.c'));
după execuție:
<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here
$('.a').before($('.c'));
după execuție:
<div class='c'>c</div> //<----this will be placed here
<div class='a'>
<div class='b'>b</div>
</div>
Această imagine afișată mai jos vă oferă o înțelegere clară și arată diferența exactă între .append()
, .prefixeaza()
, .după () "și".înainte de a()
Puteți vedea din imaginea asta.append () "și".prefixeaza ()`, adaugă noi elemente copii elemente (de culoare maro) la țintă.
Și .după () "și".înainte de a ()
, adaugă noi elemente ca frate elemente (de culoare neagră) la țintă.
Aici este un [DEMO][2] pentru o mai bună înțelegere.
EDIT: oglindită versiuni ale acestor funcții:
Folosind [acest cod](
):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);
pe această țintă:
<div class="target">
This is the target div to which new elements are associated using jQuery
</div>
Astfel încât, deși aceste funcții flip parametru de ordine, fiecare creează același element de cuibărit:
var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))
...dar se vor întoarce un element diferit. Aceasta contează pentru metoda de înlănțuire.
Cel mai bun mod este de gând să documentare.
.append()
vs .după()
append()
: a se Introduce conținut, specificat de parametru, până la sfârșitul de fiecare element din set de potrivire elemente..prefixeaza()
vs .înainte de a()
prefixeaza()
: a se Introduce conținut, specificat de parametru, la începutul de fiecare element din set de potrivire elemente.înainte()
: a se Introduce conținut, specificat de parametru, înainte fiecare element din set de potrivire elemente.Deci, adăugați și prefixeaza se referă la copilul de obiect întrucât, după și înainte de a se referă la frate la obiect.
Există o diferență de bază între .append () "și".după () "și".prefixeaza () "și".înainte de a()
.
.append ()
, adaugă parametru element în interiorul selectorului element's etichetă la sfârșitul întrucât .după ()
, adaugă parametru element după elementul's etichetă.
Vice-versa este de .prefixeaza () "și".înainte de a()
.
[Vioara][1]
Nu există nici un avantaj în plus pentru fiecare dintre ele. Totul depinde de scenariu. Codul de mai jos prezintă diferența lor.
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
<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>
Imaginați-vă DOM (pagina HTML) ca un copac. Elementele HTML sunt nodurile acestui arbore.
Anii append()
adaugă un nou nod la "copil" de nodul pe care a numit-o pe.
Example:$("#mydiv").append("<p>Hello there</p>")
creates a child node <p> to <div>
Anii după()
adaugă un nou nod ca un frate / o soră sau la același nivel sau a copilului pentru părintele de nodul pe care a numit-o pe.
Atunci când sunt manipularea DOM cu jquery metodele folosite depind de rezultatul pe care îl doriți și o utilizare frecventă este de a înlocui conținutul.
În înlocuind conținutul pe care doriți să.elimina()conținutul și înlocuiți-l cu noul conținut. Dacă tu
.elimina()existente tag-ul și apoi încercați să-l folosească.append()
nu o't de lucru, pentru tag-ul în sine a fost eliminat, întrucât dacă utilizați .după()
, conținut nou este adăugat 'afara' (acum eliminate) tag-ul și e't afectate de precedent .elimina()
.