JQuery adalah salah satu library yang banyak digunakan dan cukup populer di JavaScript. Hal tersebut disebabkan karena keistimewaan jQuery adalah kesederhanaannya. Kali ini saya akan membahan tentang Cara Menambah element html dengan jquery.

Cara Menambah element html

Jquery memiliki fungsi untuk menambah element html, fungsi tersebut yaitu append(), prepend(), after() dan before().

Metode append().

Metode append() yaitu menyisipkan konten tertentu di akhir elemen yang dipilih. Sebagai  tag “p” adalah elemen yang dipilih dan menyisipkan text diakhir tag “p”.

$("button").click(function(){
  $("p").append("<b>Appended text</b>");
});

contoh kode :

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });
});
</script>

<p>This is a paragraph.</p>
<button id="btn1">Append text</button>

ketika dijalankan maka text apend Append text akan menambahkan secara otomatis diakhir tag “p” saat button di klik.

• Mengatasi Error Javascript Uncaught TypeError: a.indexOf is not a function
• Mengatasi Fatal error: Maximum execution time of 300 seconds exceeded

Metode prepend().

Metode prepend() menyisipkan konten tertentu di awal elemen yang dipilih. Sebagai contoh tag “p” adalah elemen yang dipilih dan menyisipkan text diawal tag “p”.

$("button").click(function(){
  $("p").prepend("<b>Prepended text</b>");
});

contoh kode :

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>");
  });
});
</script>

<p>This is a paragraph.</p>
<button id="btn1">Append text</button>

ketika dijalankan maka text Prepend text akan menambahkan secara otomatis diawal tag “p” saat button di klik.

Metode after().

Metode after() menyisipkan konten tertentu setelah elemen yang dipilih. Sebagai contoh tag “p” adalah elemen yang dipilih dan menyisipkan text setelah tag “p”.

$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});

contoh kode :

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").after("<p>Hello world!</p>");
  });
});
</script>

<p>This is a paragraph.</p>
<button id="btn1">Append text</button>

ketika dijalankan maka text Hello world! akan menambahkan secara otomatis setelah tag “p” saat button di klik.

Metode before().

Metode before() menyisipkan konten tertentu sebelum elemen yang dipilih. Sebagai contoh tag “p” adalah elemen yang dipilih dan menyisipkan text sebelum tag “p”.

$("button").click(function(){
  $("p").before("<p>Hello world!</p>");
});

contoh kode :

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").before("<p>Hello world!</p>");
  });
});
</script>

<p>This is a paragraph.</p>
<button id="btn1">Append text</button>

ketika dijalankan maka text Hello world! akan menambahkan secara otomatis sebelum tag “p” saat button di klik.

Kesimpulan.

Dengan beberapa metode yang disediakan oleh jquery dapat memudahkan untuk menambahkan element tertentu kedalam html dengan mudah tanpa harus merubah kode inti. Jasa Pembuatan Website Profesional

sumber : www.w3schools.com