Menambah Elemen Dan Konten

View Categories

Menambah Elemen Dan Konten

JQuery mempunyai beberapa fungsi yang dapat dipakai untuk menyisipkan menambahkan konten atau elemen HTML lain pada suatu elemen HTML.

Fungsi-fungsi yang biasa digunakan untuk menyisipkan atau menambahkan konten pada elemen HTML adalah :

  • append() – Menyisipkan konten atau elemen HTML lain pada bagian akhir suatu elemen HTML
  • prepend() – Menyisipkan konten atau elemen HTML lain pada bagian awal suatu elemen HTML
  • after() – Menyisipkan konten atau elemen HTML lain setelah suatu elemen HTML
  • before() – Menyisipkan konten atau elemen HTML lain sebelum suatu elemen HTML

Fungsi append

Fungsi append digunakan untuk menyisipkan konten atau elemen HTML lain pada bagian akhir suatu elemen HTML. Contoh di bawah ini memperlihatkan text baru disisipkan pada bagian akhir konten suatu paragraf.

$("p").append("Some appended text.");

Jalankan Contoh

Fungsi prepend

Fungsi append digunakan untuk menyisipkan konten atau elemen HTML lain pada bagian awal suatu elemen HTML. Contoh di bawah ini memperlihatkan text baru disisipkan pada bagian awal konten suatu paragraf.

$("p").prepend("Some prepended text.");

Jalankan Contoh

Menyisipkan Banyak Konten

Fungsi append dan prepend dapat menerima banyak parameter (infinite parameter). Contoh di bawah ini memperlihatkan tiga konten berupa elemen HTML disisipkan pada elemen body.

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

Jalankan Contoh

Fungsi after Dan before

Fungsi after digunakan untuk menyisipkan konten atau elemen HTML lain setelah suatu elemen HTML. Konten yang disisipkan berada di luar elemen HTML tersebut. Fungsi before digunakan untuk menyisipkan konten atau elemen HTML lain sebelum suatu elemen HTML. Konten yang disisipkan berada di luar elemen HTML tersebut. Contoh di bawah ini memperlihatkan konten berbentuk text disisipkan sebelum dan sesudah elemen image.

$("img").after("Some text after");

$("img").before("Some text before");

Jalankan Contoh

Fungsi after dan before juga bisa menerima banyak parameter sekaligus.

function afterText() {
  var txt1 = "<b>I </b>";                    // Create element with HTML 
  var txt2 = $("<i></i>").text("love ");     // Create with jQuery
  var txt3 = document.createElement("b");    // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

Jalankan Contoh

Tutorial sebelumnya : Mengisi Elemen Dan Konten
Tutorial setelahnya : Menghapus Elemen Dan Konten
Semua Tutorial JQuery : Tutorial JQuery 

Tinggalkan Balasan