Mengganti Elemen dengan jQuery DOM Manipulation

Selamat Datang di Miniblog dari Inzaghi's Blog! Kali ini, kita akan membuat Program mengganti Elemen dengan jQuery DOM Manipulation.

Sumber : Tutorialsteacher.comTutorialspoint.com, dan W3schools.com

Untuk Software-nya, Anda bisa menggunakan Notepad++, Sublime Text, ataupun VS Code, dan ditampilkan melalui Browser Anda. Bahkan Anda juga bisa menggunakan Online Compiler yang ada di Internet seperti ProgramizOneCompilerOnlineGDB, dll.


Metode replaceWith() jQuery dapat digunakan untuk menggantikan elemen DOM lengkap dengan elemen HTML atau DOM lainnya. Berikut adalah sintaks dari metode ini :

$(selector).replaceWith(val);

Di sini, val adalah nilai yang ingin Anda miliki sebagai pengganti elemen asli. Ini bisa berupa HTML atau teks biasa.

Contoh :

Berikut adalah contoh di mana kita akan menggantikan elemen <p> dengan elemen <h1> dan kemudian kita menggantikan elemen <h1> dengan elemen <h2>.

<!DOCTYPE html>
<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#b1").click(function () {
          $("p").replaceWith("<h1>This is new heading</h1>");
        });
        $("#b2").click(function () {
          $("h1").replaceWith("<h2>This is another heading</h2>");
        });
      });
    </script>
  </head>
  <body>
    <p>Click below button to replace me</p>

    <button id="b1">Replace Paragraph</button>
    <button id="b2">Replace Heading</button>
  </body>
</html>

Output :


Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Post a Comment

Previous Post Next Post