web-dev-qa-db-ja.com

JavaScriptを使用してHTML要素のIDを変更するにはどうすればよいですか？

HTML div要素のクライアント側のIDをJavaScriptで変更しています。次のコードは、Internet Explorerでは正常に機能しますが、Firefox/2.0.0.20では機能しません。 Firefoxのより新しいバージョンで動作します。

document.getElementById('one').id = 'two';

誰でも私に言うことができます：

  1. FireFoxでこれが機能しない理由。
  2. FireFoxでこれを機能させる方法。

明確にするために、外部スタイルシートの別のスタイルを参照するように要素IDを変更しています。スタイルはIEで適用されますが、FFでは適用されません。

javascripthtmlcross-browser
31
Tesseract

Firefoxで動作します（を含む2.0.0.20）。 http://jsbin.com/akili （編集するURLに/editを追加）を参照してください：

<p id="one">One</p>
<a href="#" onclick="document.getElementById('one').id = 'two'; return false">Link2</a>

最初のクリックはidを"two"に変更し、2番目のクリックはid="one"の要素が見つからないためエラーになります！

おそらく、別の要素alreadywith id="two"（FYI 同じidを持つ複数の要素を持つことはできません ）。

44
Roatin Marth

それは私のために働くようです：

<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>

予想される動作は、「フルーツ」という単語の色を変更することです。

おそらく、ルーチンを呼び出したときにドキュメントが完全にロードされていませんか？

11
user181548

idを使用せずにgetElementByIdを変更できます

例：

<div id = 'One' onclick = "One.id = 'Two'; return false;">One</div>

ここで見ることができます： http://jsbin.com/elikaj/1/

Mozilla Firefox 22およびGoogleでテスト済みChrome 60.0

5
nimday