Bagaimana untuk menukar ID elemen menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar ID elemen menggunakan JavaScript?

WBOY

Lepaskan： 2023-09-13 14:45:13

ke hadapan

1588 orang telah melayarinya

如何使用 JavaScript 更改元素的 ID？

Secara umumnya, ID mana-mana elemen dalam dokumen HTML adalah unik dan hanya boleh diberikan kepada elemen sekali sahaja. Tetapi id itu boleh ditukar kemudian menggunakan JavaScript, mengikut peraturan yang sama untuk keunikan ID baharu dan hanya satu elemen boleh mengandungi ID baharu. Dalam artikel ini, kita akan melihat cara untuk menukar ID elemen menggunakan JavaScript.

JavaScript menyediakan atau membenarkan kami menggunakan atribut id untuk mendapatkan id mana-mana elemen, serta menukar atau menambah ID baharu pada mana-mana elemen HTML dalam dokumen.

Mari kita belajar dengan bantuan contoh kod cara menukar ID elemen dalam dokumen HTML menggunakan JavaScript menggunakan atribut id.

Tatabahasa

Sintaks berikut akan menerangkan kepada anda cara menggunakan atribut id untuk menukar, mendapatkan id baharu dan menambah id baharu pada elemen HTML -

Selected_element.id = newID;

Salin selepas log masuk

Dalam sintaks di atas, mula-mula kita akan memilih elemen HTML yang IDnya ingin kita ubah menggunakan HTML DOM dan kemudian tetapkan operator penugasan id baharu di sebelah kanannya menggunakan atribut id dengan pengendali titik.

Mari kita fahami pelaksanaan praktikal atribut id menukar ID elemen dalam dokumen HTML melalui contoh kod.

Algoritma

Langkah 1 - Pada langkah pertama kami akan menambah elemen input untuk mendapatkan ID baharu sebagai input daripada pengguna dan kemudian kami akan menukar ID elemen input yang sama menggunakan atribut id.
Langkah 2 - Dalam langkah ini, kami akan menambah elemen butang pada dokumen HTML menggunakan acara onclick, yang kemudiannya akan memanggil fungsi JavaScript untuk menukar ID elemen input. < /p>
Langkah 3 - Dalam langkah seterusnya, kami akan mengambil elemen input dan memaparkan id awal elemen itu kepada pengguna supaya mereka boleh melihat dengan mudah ID elemen yang berubah.
Langkah 4 - Dalam langkah keempat kita akan menentukan fungsi JavaScript di mana sekali lagi kita akan mendapat elemen input dan menetapkan idnya sama dengan teks yang dimasukkan oleh pengguna dalam medan input dan menukar idnya menggunakan atribut id untuk teks ini.
Langkah 5 - Dalam langkah terakhir kami akan menggunakan atribut id untuk memaparkan ID baharu yang diberikan kepada elemen dan menetapkan fungsi sebagai nilai kepada acara onclick supaya ia boleh dipanggil kemudian apabila pengguna mengklik butang .

Contoh

Contoh berikut akan menggambarkan cara menggunakan atribut id untuk menukar id elemen dalam dokumen HTML -

<html>
<body>
   <h2>Changing ID of the element using JavaScript</h2>
   <p>Enter new ID, you want to give to element:</p>
   <input type = "text" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to change the ID </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you entered ID of your choice is: <b> " + inp1.id + " </b> <br>"
      function display() {
         var inp = document.getElementById('inp1');
         var newID = inp.value;
         inp.id = newID;
         result.innerHTML += " The ID of input element after clicking the button is changed to: <b> " + inp.id + " </b> <br> ";
      }
   </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menukar ID elemen input menggunakan atribut id JavaScript dan memaparkan ID lama dan ID baharu yang diberikan kepada elemen input pada skrin pengguna.

Mari kita lihat contoh kod lain di mana kita akan terus menukar ID elemen dalam acara onclick dan bukannya menghantar fungsi kepadanya.

Algoritma

Algoritma contoh di atas dan contoh ini hampir serupa. Anda hanya perlu menukar nilai yang diluluskan dalam acara onclick elemen butang, seperti yang ditunjukkan dalam contoh di bawah.

Contoh

Contoh di bawah akan menerangkan kepada anda perubahan yang mesti dibuat dalam algoritma sebelumnya untuk menjadikannya menukar id elemen input seperti contoh sebelumnya -

<html>
<body>
   <h2>Change ID of the element using JavaScript</h2>
   <p>Click the button below to change the ID of the below input element:</p>
   <input type = "text" id = "inp1", value = "Input Element"> <br> <br>
   <button id = "btn" onclick = "document.getElementById('inp1').id = 'newID'; return false">    Click to change the ID
   </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you clicked the button is: <b> " + inp1.id + " </b> <br><br>"
      result.innerHTML += "<b>Note: </b>To see the change in the ID of the input element open the developer tools and inspect the input element to see its ID after clicking the button. ";
   </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami boleh menukar ID elemen input, tetapi dalam kes ini, kami tidak boleh menggantikan id sebelumnya dengan id pilihan kami kerana kami menetapkan nilai ID baharu secara statik kepada elemen tersebut. p>

Dalam artikel ini kami mempelajari cara menukar id elemen yang terdapat dalam dokumen HTML menggunakan id pilihan anda dan id statik yang ingin kami berikan kepada elemen itu, id statik ini mestilah unik dan hanya dokumen itu boleh mengandungi elemen tunggal id itu.

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