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);
});
append
Które (do wykorzystania?) błędy tj używamappendTo
który wydaje alsomore poprawny semantycznie zwłaszcza, że istniejeafter
(łańcuch łańcuch łańcuch) - Uwaga:after
po nie jest w zasięguOdpowiedzi:
Widzieć:
.append()
umieszcza dane w elemencielast index
i.prepend()
wstawia element poprzedzającyfirst index
przypuszczać:
po
.append()
uruchomieniu będzie wyglądać następująco:po wykonaniu:
Fiddle z .append () w wykonaniu.
po
.prepend()
uruchomieniu będzie wyglądać następująco:po wykonaniu:
Fiddle z .prepend () w wykonaniu.
.after()
umieszcza element po elemencie,.before()
umieszcza element przed elementemużywając po:
po wykonaniu:
Fiddle z .after () w wykonaniu.
używając przed:
po wykonaniu:
Wykonuj skrzypce za pomocą .before ().
źródło
$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
.append()
nie załaduje go w ten sposób. Musisz użyć.load(url, params)
.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 :
w tym celu:
Więc chociaż te funkcje odwracają kolejność parametrów, każda tworzy to samo zagnieżdżenie elementu:
... ale zwracają inny element. Ma to znaczenie przy łączeniu metod .
źródło
append()
&prepend()
służą do wstawiania treści do elementu (uczynienie treści jego dzieckiem), aafter()
& dobefore()
wstawiania treści poza elementem (czyniąc treść rodzeństwem).źródło
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.
źródło
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
źródło
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ę.
źródło
źródło
Wyobraź sobie DOM (stronę HTML) jako drzewo po prawej stronie. Elementy HTML są węzłami tego drzewa.
append()
Dodaje nowego węzła dochild
węzła ty nazwie go.after()
Dodaje nowy węzeł jako rodzeństwo lub na tym samym poziomie lub dziecka do rodzica węzła zwanego go.źródło
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()
.źródło