Program jQuery Set Content

Hello guys! jQuery merupakan salah satu Library JavaScript yang cukup populer. Kali ini, kita akan membuat Program JavaScript jQuery Set Content.

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 html() dan text() jQuery dapat digunakan untuk mengatur konten elemen HTML yang cocok. Berikut adalah sintaks dari kedua metode tersebut ketika digunakan untuk mengatur nilai :

$(selector).html(val, [function]);

$(selector).text(val, [function]);

Di sini, val adalah HTML atau teks yang akan diatur sebagai konten elemen. Kita dapat menyediakan fungsi callback opsional ke metode-metode ini yang akan dipanggil ketika nilai elemen akan diatur.

Metode text() jQuery mengatur nilai teks biasa dari konten, sedangkan metode html() mengatur konten dengan tag HTML.

Contoh :

Berikut adalah contoh yang menunjukkan bagaimana mengatur konten suatu elemen dengan metode text() dan html() jQuery :

<!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 () {
        $("#text").click(function () {
          $("p").text(
            "Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b>"
          );
        });
        $("#html").click(function () {
          $("p").html(
            "Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b>"
          );
        });
      });
    </script>
  </head>
  <body>
    <p>Click on any of the two buttons to see the result</p>

    <button id="text">Set Text</button>
    <button id="html">Set HTML</button>
  </body>
</html>

Output :


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

Terima Kasih 😀😊😘👌👍 :)

Post a Comment

Previous Post Next Post