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

205

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);
});
Epik
źródło
2
Nigdy nie używać appendKtóre (do wykorzystania?) błędy tj używam appendToktóry wydaje alsomore poprawny semantycznie zwłaszcza, że istnieje after(łańcuch łańcuch łańcuch) - Uwaga: afterpo nie jest w zasięgu
mikakun
Wygląda na to, że to, co naprawdę chcesz wiedzieć, to dlaczego warto wybrać opcję Dołącz vs Po, aby osiągnąć ten sam wynik. Załóżmy, że masz <div class = 'a'> <p class = 'b'> </p> </div>. Wtedy $ („. A”). Append („cześć”) miałby taki sam wpływ jak $ („. B”). Po („cześć”). Mianowicie: <div class = 'a'> <p class = 'b'> </p> 'hello' </div>. W takim przypadku to nie ma znaczenia. Wynikowy html jest taki sam, więc wybierz dołącz lub po, w zależności od tego, który selektor jest najwygodniejszy w skrypcie.
tgoneil

Odpowiedzi:

446

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 ().


Jai
źródło
1
@joraid zaktualizował odpowiedź zgodnie z komentarzem, dodając kilka linków do skrzypek js w trakcie wykonywania.
Jai
1
świetne wyjaśnienie, ale co jeśli chcę załadować w zewnętrznym widoku HTML? Używając MVC tak:$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
Djeroen
4
@Djeroen .append()nie załaduje go w ten sposób. Musisz użyć .load(url, params).
Jai
1
Miły! Czy mogę również zapytać o różnicę między „$ (element) .append (content)” a „$ (content) .appendTo (target)” i tym podobne? (Nie chcę zaczynać nowego wątku w tym
temacie
135

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

Infografika jQuery

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:

Infografika wstawiania jQuery oraz odwrócone wersje 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 .

VSri58
źródło
2
bardzo łatwo zrozumiały obraz. :)
Abdul Hameed
Pozytywne! Jeśli zapytam, to co z appendTo i prependTo w obrazie? Proszę zaktualizować.
Brst dev7
Ciągle odnoszę się do twojej infografiki. Mam nadzieję, że podoba Ci się dodanie odwróconych funkcji.
Bob Stein
37

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

alijsh
źródło
19

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.

Ionică Bizău
źródło
9

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

I_Debug_Wszystko
źródło
5

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
Code.Town
źródło
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>    
Nate
źródło
3

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.

anu
źródło
3

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().

Michael Durrant
źródło