.append (), prepend (), .after () i .before ()

Jestem dość biegły w kodowaniu, ale od czasu do czasu napotykam kod, który wydaje się zasadniczo robić to samo. Moje główne pytanie tutaj brzmi: dlaczego miałbyś .append()zamiast tego używać .after()lub zastępować wersety?

Szukałem i wydaje się, że nie mogę znaleźć jasnej definicji różnic między nimi i kiedy ich używać, a kiedy nie.

Jakie są zalety jednego nad drugim, a także dlaczego miałbym używać jednego zamiast drugiego? Czy ktoś może mi to wyjaśnić?

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);
});

Widzieć:

.append()umieszcza dane w elemencie last indexi
.prepend()wstawia element poprzedzającyfirst index

przypuszczać:

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

po .append()uruchomieniu będzie wyglądać następująco:

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

po wykonaniu:

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

Fiddle z .append () w wykonaniu.

po .prepend()uruchomieniu będzie wyglądać następująco:

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

po wykonaniu:

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

Fiddle z .prepend () w wykonaniu.

.after()umieszcza element po elemencie,
.before()umieszcza element przed elementem

używając po:

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

po wykonaniu:

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

Fiddle z .after () w wykonaniu.

używając przed:

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

po wykonaniu:

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

Wykonuj skrzypce za pomocą .before ().

Ten obraz wyświetlany poniżej daje zrozumienie i pokazuje dokładną różnicę między .append(), .prepend(), .after()i.before()

Z obrazu widać, że .append()i .prepend()dodaje nowe elementy jako elementy potomne (brązowy kolor) do celu.

A .after()i .before()dodaje nowe elementy jak rodzeństwem elementów (w kolorze czarnym) do celu.

Oto DEMO dla lepszego zrozumienia.

EDYCJA: odwrócone wersje tych funkcji:

Za pomocą tego kodu :

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);

w tym celu:

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

Więc chociaż te funkcje odwracają kolejność parametrów, każda tworzy to samo zagnieżdżenie elementu:

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

... ale zwracają inny element. Ma to znaczenie przy łączeniu metod .

append()& prepend()służą do wstawiania treści do elementu (uczynienie treści jego dzieckiem), a after()& do before()wstawiania treści poza elementem (czyniąc treść rodzeństwem).

Najlepszym sposobem jest udokumentowanie.

.append() vs .after()

• . append(): Wstaw zawartość określoną przez parametr na końcu każdego elementu w zestawie dopasowanych elementów.
• . after(): Wstaw treść określoną przez parametr po każdym elemencie w zestawie dopasowanych elementów.

.prepend() vs .before()

• prepend(): Wstaw zawartość określoną przez parametr na początku każdego elementu w zestawie dopasowanych elementów.
• . before(): Wstaw zawartość określoną przez parametr przed każdym elementem w zestawie dopasowanych elementów.

Tak więc, append i prepend odnosi się do potomka obiektu, podczas gdy przed i przed nim odnosi się do rodzeństwa obiektu.

Jest to podstawowa różnica pomiędzy .append()a .after()i .prepend()a .before().

.append()dodaje element parametru wewnątrz znacznika elementu selektora na samym końcu, podczas gdy .after()dodaje element parametru po znaczniku elementu .

Odwrotnie jest dla .prepend()i .before().

Skrzypce

Nie ma żadnej dodatkowej korzyści dla każdego z nich. To zależy całkowicie od twojego scenariusza. Poniższy kod pokazuje ich różnicę.

    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>    

Wyobraź sobie DOM (stronę HTML) jako drzewo po prawej stronie. Elementy HTML są węzłami tego drzewa.

append()Dodaje nowego węzła do childwęzła ty nazwie go.

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

creates a child node <p> to <div>

after()Dodaje nowy węzeł jako rodzeństwo lub na tym samym poziomie lub dziecka do rodzica węzła zwanego go.

Aby spróbować odpowiedzieć na główne pytanie:

dlaczego miałbyś używać .append () zamiast .after () lub wersetów?

Podczas manipulacji DOM za pomocą jquery stosowane metody zależą od oczekiwanych rezultatów, a częstym zastosowaniem jest zastępowanie treści.

Zastępując treść, którą chcesz, .remove()i zamień na nową. Jeśli .remove()istniejący tag, a następnie spróbuj go użyć .append(), nie zadziała, ponieważ sam tag został usunięty, natomiast jeśli go użyjesz .after(), nowa treść zostanie dodana „poza” tagiem (teraz usuniętym) i nie ma na niego wpływu poprzednia .remove().