Bagaimana cara mengubah ID elemen HTML dengan JavaScript?
Saya memodifikasi ID dari elemen HTML div sisi klien dengan JavaScript. Kode berikut ini bekerja dengan baik di Internet Explorer tetapi tidak di Firefox/2.0.0.0.20. Kode ini bekerja di versi Firefox yang lebih baru.
document.getElementById('one').id = 'two';Adakah yang bisa memberitahu saya:
- Mengapa ini tidak berfungsi di FireFox.
- Bagaimana membuat ini bekerja di FireFox.
Untuk memperjelas, saya mengubah ID elemen untuk mereferensikan gaya yang berbeda dalam lembar gaya eksternal. Gaya diterapkan di IE tetapi tidak di FF.
Ia bekerja di Firefox (termasuk 2.0.0.20). Lihat http://jsbin.com/akili (tambahkan /edit ke url untuk mengedit):
<p id="one">One</p>
<a href="#" onclick="document.getElementById('one').id = 'two'; return false">Link2</a>Klik pertama mengubah id menjadi "two", klik kedua error karena elemen dengan id="one" sekarang tidak dapat ditemukan!
Mungkin Anda memiliki elemen lain sudah dengan id="two" (FYI Anda tidak dapat memiliki lebih dari satu elemen dengan id yang sama).
Tampaknya itu berhasil bagi saya:
<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>Perilaku yang diharapkan adalah mengubah warna kata "fruit".
Mungkin dokumen Anda tidak dimuat sepenuhnya ketika Anda memanggil rutinitas?
Anda bisa memodifikasi id tanpa harus menggunakan getElementById
Contoh:
<div id = 'One' onclick = "One.id = 'Two'; return false;">One</div>Anda bisa melihatnya di sini: http://jsbin.com/elikaj/1/
Diuji dengan Mozilla Firefox 22 dan Google Chrome 60.0
