Cara menukar teks di dalam semua tag HTML menggunakan JavaScript-html tutorial-php.cn

Cara menukar teks di dalam semua tag HTML menggunakan JavaScript

WBOY

Lepaskan： 2023-08-26 13:57:14

ke hadapan

1471 orang telah melayarinya

Cara menukar teks di dalam semua tag HTML menggunakan JavaScript

Dalam artikel ini, kami akan melaksanakan tugas menukar teks dalam semua tag HTML menggunakan JavaScript. Mari selami artikel ini untuk mengetahui lebih lanjut tentang menukar teks dalam semua HTML, tetapi pertama sekali, mari kita tentukan teg HTML.

Apakah itu tag HTML

Teg HTML ialah sekeping bahasa penanda yang digunakan untuk menunjukkan permulaan dan penghujung elemen HTML dalam dokumen HTML. Tag HTML ialah blok binaan elemen HTML yang membantu pelayar web menukar dokumen HTML ke halaman web.

Untuk pemahaman yang lebih baik, gunakan JavaScript untuk menukar teks di dalam semua tag HTML. Mari kita lihat contoh berikut.

Contoh

Dalam contoh di bawah, kami akan membuat halaman web mudah di mana kami akan menukar teks dengan menjalankan skrip.

<!DOCTYPE html>
<html>
   <body style="text-align:center;">
      <h2>
         Click on the button to change the text
      </h2>
      <label id = "tutorial">
         Welcome to Tutorialspoint
      </label>
      <br>
      <button onclick="changetext()">
         Click Here!
      </button>
      <script>
         function changetext() {
            var x = document.getElementById("tutorial");
            if (x.innerHTML === "Welcome to Tutorialspoint") {
               x.innerHTML = "The Best E-way Learning";
            } else {
               x.innerHTML = "Welcome to Tutorialspoint";
            }
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada teks dan butang yang diklik. Jika pengguna mengklik butang, teks akan berubah dan teks lain akan muncul di halaman web.

Gunakan replaceWith()

Kaedah

Element.replaceWith() menggantikan objek dalam senarai anak ibu bapa Elemen ini dengan set objek Nod atau rentetan. Memasukkan nod teks yang setara untuk objek String.

Tatabahasa

Berikut ialah sintaks replaceWith() -

ChildNode.replaceWith(Node);

Salin selepas log masuk

Contoh

Pertimbangkan contoh berikut di mana kami menggunakan replaceWith() untuk menukar teks di dalam markup.

<!DOCTYPE html>
<html>
   <body>
      <h2 id="tutorial">
      <span class="quotation">“</span>
      Lost in the ave of you
      <span class="quotation">”</span>
      </h2>
      <script>
         const changed = document.getElementById('tutorial');
         changed.childNodes[2].replaceWith('Welcome');
      </script>
   </body>
</html>

Salin selepas log masuk

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan teks pada halaman web digantikan dengan teks asal yang digunakan dalam skrip.

Gunakan querySelector()

Apabila satu atau satu set pemilih disediakan, kaedah Dokumen querySelector() mengembalikan Elemen pertama dalam dokumen yang sepadan dengannya. Mengembalikan Null jika tiada padanan.

Tatabahasa

Berikut ialah sintaks querySelector()

querySelector(selectors)

Salin selepas log masuk

Contoh

Laksanakan kod berikut, kami menggunakan querySelector() untuk menukar teks dalam teg HTML.

<!DOCTYPE html>
<html>
   <body>
      <h1>Welcome</h1>
      <script>
         document.querySelector("h1").textContent = 'Tutorialspoint';
      </script>
   </body>
</html>

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi teks daripada halaman web yang digantikan dengan teks asal yang digunakan dalam penanda.

Atas ialah kandungan terperinci Cara menukar teks di dalam semua tag HTML menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!