Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar teks label menggunakan JavaScript?

Bagaimana untuk menukar teks label menggunakan JavaScript?

WBOYke hadapan: 2023-09-03 23:53:021913semak imbas

如何使用 JavaScript 更改标签的文本？

Sebelum kita memahami cara menukar teks elemen label dalam dokumen HTML, mari kita fahami dahulu apakah tag label itu sendiri?

Teg

membantu meningkatkan kebolehgunaan halaman web untuk pengguna tetikus kerana ia boleh menogol teks di dalamnya jika pengguna mengklik padanya.

Sekarang mari kita bincangkan cara menukar teks elemen label menggunakan JavaScript.

JavaScript membenarkan kami menukar teks mana-mana elemen dalam dokumen HTML menggunakan dua sifat terbina dalam seperti yang ditunjukkan di bawah -

Gunakan atribut innerHTML.
Gunakan atribut innerTeks.

Gunakan atribut innerHTML

Atribut

innerHTML membolehkan kami menukar atau menetapkan teks baharu menggunakan beberapa HTML, iaitu anda boleh menggunakan teg HTML sambil memberinya teks baharu dan mengurus teks baharu mengikut kepentingannya dengan mentakrifkannya menggunakan elemen HTML yang berbeza.

tatabahasa

Sintaks berikut digunakan untuk menukar atau menetapkan teks baharu kepada elemen label menggunakan atribut innerHTML JavaScript -

selected_label_element.innerHTML = " new Text ";

Mari kita lihat pelaksanaan praktikal menukar sifat HTML dalaman bagi teks elemen label menggunakan contoh kod JavaScript -

Algoritma

Langkah 1 - Pada langkah pertama, kami akan menambah elemen tag dengan ID pada dokumen HTML supaya kami boleh merangkaknya dalam JavaScript dan secara ringkas Kemudian gunakan atribut innerHTML untuk menukar teksnya.
Langkah 2 - Dalam langkah seterusnya, kami akan menambah elemen input pada dokumen untuk mendapatkan teks input daripada pengguna dan menggantikan teks elemen label dengan teks tersebut . p>
Langkah 3 - Dalam langkah ini, kami akan menambah elemen butang dengan acara onclick yang dikaitkan dengannya, yang akan mempunyai fungsi sebagai nilai, dan apabila pengguna Ia dipanggil apabila butang diklik.
Langkah 4 - Dalam langkah keempat, kami akan mentakrifkan fungsi tersuai JavaScript di mana kami akan menukar teks tag label menggunakan atribut innerHTML seperti di atas Sintaks ditunjukkan.
Langkah 5 - Dalam langkah terakhir, kami menetapkan fungsi yang ditakrifkan dalam langkah terakhir kepada acara onclick yang ditakrifkan bersama dengan label butang supaya ia boleh dipanggil kemudian Ia mengklik butang.

Contoh

Contoh berikut akan menerangkan cara sebenarnya menggunakan atribut innerHTML untuk menukar teks elemen label menggunakan JavaScript -

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper"> The text of the below label element will be replaced by the text you enter in input bar once you click the button. </p>
   <label id = "labelText"> This is the initial text inside the label element. </label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()"> Click to change the Text </button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerHTML = " <b> " + enteredText + ", </b> is the new text of the label element that replaces the previous text, which is entered by you. </b> ";
      }
   </script>
</body>
</html>

Dalam contoh di atas, mula-mula kita mendapatkan elemen teg menggunakan ID yang diberikan kepadanya dalam dokumen, dan kemudian menggunakan sifat innerHTML untuk menukar teks kepada teks baharu yang turut mengandungi teg HTML.

Gunakan atribut innerTeks

Seperti atribut innerHTML, atribut innerText juga digunakan untuk menukar teks mana-mana elemen HTML yang terdapat dalam dokumen HTML. Ia hampir serupa dengan atribut innerHTML, satu-satunya perbezaan ialah ia tidak membenarkan penggunaan elemen HTML yang mengandungi teks di dalamnya. Jika anda cuba menggunakan elemen HTML dengan teks, ia akan menganggapnya sebagai sebahagian daripada teks baharu dan memaparkannya pada skrin pengguna sebagaimana adanya.

tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menggunakan atribut innerText untuk menukar teks elemen label -

selected_label_element.innerText = " new Text ";

Mari kita memahaminya secara terperinci dan melaksanakannya secara praktikal dengan bantuan contoh kod JavaScript.

Algoritma

Algoritma contoh sebelumnya dan contoh ini hampir serupa. Anda hanya perlu membuat beberapa perubahan kecil, menggantikan atribut innerHTML dengan atribut innerText dalam contoh di atas untuk menukar teks.

Contoh

Contoh berikut akan menggambarkan cara menggunakan atribut innerText untuk menukar teks elemen label dalam JavaScript -

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper">The text of the below label element will be replaced by the text you enter in input bar once you click the button.</p>
   <label id = "labelText">This is the initial text inside the label element.</label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()">Click to change the Text</button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerText = enteredText + ", is the new text of the label element that replaces the previous text, which is entered by you. ";
      }
   </script>
</body>
</html>

Dalam contoh ini, kami menggunakan JavaScript untuk menukar teks elemen label menggunakan atribut innerText dengan cara yang sama kami menggunakan atribut innerHTML.

Dalam artikel ini, kami melihat dua cara berbeza untuk menukar teks elemen teg dalam dokumen HTML dan pelaksanaan praktikalnya dalam contoh kod. Dalam yang sebelumnya, kami menukar teks menggunakan atribut innerHTML, yang membenarkan penggunaan elemen HTML untuk menyediakan teks dalam petikan berganda. Walau bagaimanapun, dalam yang terakhir, kami menggunakan sifat innerText, yang tidak membenarkan ini.

Atas ialah kandungan terperinci Bagaimana untuk menukar teks label menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bina halaman utama aplikasi blog menggunakan Angular dan MongoDBArtikel seterusnya：Bina halaman utama aplikasi blog menggunakan Angular dan MongoDB

Artikel berkaitan

Lihat lagi