Menghapus atau mengganti isi dalam DIV dengan JQuery

Misalnya kita punya tag HTML sebagai berikut

<div id="content">
   <p>Ini adalah isi dari konten</p>
</div>
<input type="button" click="gantiDiv()" />

Pada tag diatas kita akan menghapus dan mengganti semua isi dari dalam tag <div>.

1. Menghapus isi <div>
Untuk menghapus isi dalam div anda bisa menggunakan perintah .empty() pada jQuery seperti berikut:



function gantiDiv()
{
  $("#content").empty(); //menghapus semua isi yang berada dalam div dengan id content
}

2. Mengganti isi <div>
Untuk melakukan penggantian isi di dalam div yang pertama kita lakukan adalah menghapus isi terlebih dahulu kemudian mengisi dengan konten yang baru.

function gantiDiv()
{
  $("#content").empty(); //menghapus semua isi yang berada dalam div dengan id content
  var string = "<input type='text' value=' ' name='nama' />"; //membuat textbox yang akan dimasukan ke dalam <div>
  $("#content").append(string);
}

Untuk mengganti (replace) isi pada div kita juga bisa menggunakan perintah jQuery .replaceWith().

function gantiDiv()
{
  $("#content p").replaceWith("<h2>Mengganti isi</h2>"); //mengganti isi pada tag <p> didalam tag <div> dengan id content.
}

Semoga bermanfaat..