Latest web development tutorials

jQuery menambahkan elemen

Dengan jQuery, Anda dapat dengan mudah menambahkan baru elemen / konten.


Menambahkan konten HTML baru

Kita akan belajar untuk menambahkan konten baru untuk empat metode jQuery:

  • append () - Masukkan pada akhir elemen yang dipilih
  • tambahkan () - Masukkan pada awal dari elemen yang dipilih
  • setelah () - Masukkan setelah elemen yang dipilih
  • sebelum () - Masukkan elemen sebelum dipilih

jQuery append () metode

Metode jQuery append () menyisipkan isi pada akhir elemen yang dipilih.

contoh

. $ ( "P") tambahkan ( " tambahkan teks");

Coba »


jQuery tambahkan () metode

Metode jQuery tambahkan () menyisipkan isi pada awal dari elemen yang dipilih.

contoh

. $ ( "P") tambahkan ( " menambahkan teks pada awal");

Coba »


Tambahkan beberapa elemen baru append () dan tambahkan () metode

Dalam contoh di atas, kita hanya di awal dipilih elemen / end insert text / HTML.

Namun, tambahkan () dan tambahkan () metode dapat menerima jumlah yang tidak terbatas dari elemen baru dengan parameter. Anda dapat menghasilkan teks / HTML (seperti dalam contoh di atas) dengan jQuery, atau melalui kode JavaScript dan elemen DOM.

Pada contoh berikut, kita membuat beberapa elemen baru. Unsur-unsur ini dapat dibuat menggunakan text / HTML, jQuery atau JavaScript / DOM. Kemudian kita tambahkan () metode elemen-elemen baru ditambahkan ke teks (untuk tambahkan () sama-sama efektif):

contoh

fungsi AppendText () { var txt1 = "<p> text </ p>."; // membuat teks menggunakan tag HTML var . Txt2 = $ ( "<p > </ p>") text ( " teks."); // Membuat teks menggunakan jQuery var . Txt3 = dokumen createElement ( "p ") ;. txt3 innerHTML = " text."; // Membuat teks menggunakan teks dengan DOM DOM $ ( "Tubuh") append ( txt1, txt2, txt3) ;. // Menambahkan elemen baru }

Coba »


jQuery setelah () dan sebelum () metode

Metode jQuery setelah () untuk memasukkan konten setelah elemen yang dipilih.

jQuery sebelum () metode sebelum insersi elemen yang dipilih.

contoh

$ ( "Img") setelah ( " setelah Tambah Text") ;. $ ( "Img ") sebelum ( " menambahkan teks di depan");

Coba »


Dengan menambahkan sejumlah elemen baru setelah () dan sebelum () metode

setelah () dan sebelum () metode dapat menerima jumlah yang tidak terbatas dari elemen baru dengan parameter. Anda dapat membuat elemen baru melalui teks / HTML, jQuery atau JavaScript / DOM.

Pada contoh berikut, kita membuat beberapa elemen baru. Unsur-unsur ini dapat dibuat menggunakan text / HTML, jQuery atau JavaScript / DOM. Kami kemudian setelah () metode elemen-elemen baru ke dalam teks (dari sebelum () sama-sama efektif):

contoh

fungsi afterText () { var txt1 = "<b> I < / b>"; // membuat elemen menggunakan HTML var txt2 = $ ( "<i> </ i>") text ( "cinta") ;. // membuat elemen menggunakan jQuery var txt3 = dokumen createElement ( "besar" ) ;. // membuat elemen menggunakan DOM txt3 innerHTML = "jQuery!"; . $ ( "img") setelah (txt1, txt2, txt3) ;. // menambahkan teks dalam gambar }

Coba »