JQuery, biblioteka JavaScript, sprawia, że ​​liczne zadania programowania internetowe jest niezwykle łatwe do spełnienia. Zadania, które zwykle przyjąłoby wiele wierszy kodu, takie jak obsługa zdarzeń, animacje lub ajax, można wykonać tylko w jednym wierszu kodu. Oprócz tych zadań, dodanie elementów HTML z wielką łatwością jest możliwe przy użyciu wielu metod dostarczonych w JQuery.

Ten przewodnik nauczy Cię, jak dodawać elementy HTML za pośrednictwem JQuery przy użyciu kilku metod za pomocą odpowiednich przykładów.

Jak dodać elementy HTML przez JQuery

JQuery zapewnia następujące cztery metody dodawania elementów HTML.

1. dodać()
2. Przygotuj ()
3. zanim()
4. Po()

Tutaj szczegółowo omówiliśmy je wszystkie.

Metoda append ()

Metoda append () dodaje element jako dziecko w określonym elemencie. Wymaga nieograniczonej liczby nowych elementów HTML w postaci parametrów.

Ta metoda działa w sposób, w jaki elementy HTML są generowane za pomocą tekstu/html, jQuery lub JavaScript. Następnie te nowo wygenerowane elementy są dołączane jako ostatnie dziecko za pomocą metody append ().

Przykład

Załóżmy, że chcesz dołączyć nowe elementy na końcu uporządkowanej listy za pomocą metody append (). Użyj następującego kodu.

Html

1. Przedmiot


2. Przedmiot


3. Przedmiot

W powyższym kodzie stworzyliśmy przycisk, a także utworzyliśmy uporządkowaną listę.

JQuery

Za pomocą metody jQuery append () dodamy kolejny element do listy, klikając przycisk.

Wyjście

Początkowo na liście były trzy elementy.

Załóżmy, że trzykrotnie klikasz przycisk.

Do listy dodaje się jeszcze trzy elementy.

Metoda PREPEND ()

Ta metoda działa w podobny sposób jak metoda append () z jedyną różnicą, jaką zamiast dołączania nowo utworzonych elementów HTML przygotuje elementy jako pierwsze dziecko. Wymaga również nieograniczonej liczby nowych elementów HTML w postaci parametrów.

Przykład

Użyjemy tego samego przykładu co powyżej i zobaczymy, jak działa metoda PREPEND ().

JQuery

W powyższym fragmencie kodu używamy metody Prepend () do dodawania elementów na początku uporządkowanej listy.

Wyjście

Pierwotnie na liście znajdowały się trzy elementy.

Załóżmy, że klikasz przycisk dwa razy.

Na początku listy uporządkowanej są dodawane dwa elementy.

Metoda przed ()

Metoda przed () przyjmuje nieograniczoną liczbę nowych elementów HTML w postaci parametrów. Ta metoda działa w sposób, w jaki elementy HTML są generowane przy użyciu tekstu/html, jQuery lub JavaScript i są dodawane przed istniejącym elementem jako rodzeństwo.

Przykład

Załóżmy, że chcesz dodać nagłówek przed akapitem, klikając przycisk. Można to zrobić za pomocą metody przed ().

Html

Jakiś akapit.

W powyższym kodzie, który stworzyliśmy

, i elementy. Teraz użyjemy metody przed (), aby dodać nagłówek przed akapitem.

JQuery

Wyjście

Metoda przed () działa poprawnie

Metoda po ()

Ta metoda przyjmuje nieograniczoną liczbę nowych elementów HTML w postaci parametrów. Ta metoda działa w podobny sposób jak metoda przed () z jedyną różnicą jest to, że nowe elementy HTML są dodawane jako rodzeństwo, ale po istniejących elementach.

Przykład

Załóżmy, że chcesz dodać akapit po nagłówku, klikając przycisk. Można to zrobić za pomocą metody after ().

Html

Nagłówek

W powyższym kodzie, który stworzyliśmy

, i elementy, a przy użyciu metody after () akapit zostanie dodany po nagłówku.

JQuery

Wyjście

Z powodzeniem dodał akapit po nagłówku.

Wniosek

Elementy HTML można dodać przy użyciu różnych metod dostarczanych przez JQuery, takich jak append (), prepend (), przed () i po (). Wszystkie te metody przyjmują nieograniczoną liczbę nowych elementów HTML w postaci parametrów, a po wygenerowaniu elementów są dodawane do swoich odpowiednich pozycji w odniesieniu do zastosowanej metody. Wszystkie te metody są szczegółowo omówione w tym przewodniku, wraz z odpowiednimi przykładami.