Ich habe JavaScript Variable Obj, die ein Element im DOM darstellt und ich möchte seine ID ändern. Ich habe versucht, dies durch Folgendes zu tun, was auch zeigt, dass es nicht funktioniert!Kann ich die ID eines HTML-Elements mit Javascript ändern?
Was ist falsch mit meinem Code oben bedeutet, dass die ID geändert wird, aber nicht im DOM abgeholt? Vielen Dank im Voraus.
Der angezeigte Code funktioniert; das Problem liegt wahrscheinlich im Code, der nachschlägt und obj zuweist. Meine Vermutung ist, dass dies nur ein JavaScript-Objekt ist, nicht ein Teil der DOM-Struktur.
danke - das war genau das Problem! – user455141
Ja, Sie können, ist hier eine Lösung mit jquery
$("#xxx").attr("id", "yyy");
oder
getElementById("xxx").setAttribute("id", "yyy");
-1 Das OP hat nicht angegeben, dass sie jQuery verwenden wollen und dies sollte mit reinem JavaScript erreichbar sein. Dies beantwortet nicht seine Frage, warum die ID geändert wird, aber sie wird nicht von "getElementById" wiedergefunden. – GenericTypeTea
das Javascript-Äquivalent ist obj.setAttribute ("id", "yourid") – Tim
@Tim, eigentlich 'obj.id =" foo ";' ist das einfachste Äquivalent. – GenericTypeTea
Es gibt keinen Grund, dies sollte nicht mit reinem JavaScript arbeiten. Hier ist eine working fiddle, die es funktioniert zeigt. Sie sollten keine jQuery-Lösung oder eine andere JavaScript-Methode benötigen. id = "foo"; ist die einfachste Möglichkeit, eine DOM-Objekt-ID zu ändern.
Werfen Sie einen Blick auf meine obige Geige und versuchen Sie zu sehen, was der Unterschied zwischen Ihrem Code und mir ist.
Da Sie uns den gesamten Code nicht geben meine Vermutung ist, dass Sie wahrscheinlich
obj = document.createElement("div");
obj.id = "something";
// ...
obj.id = "newID";
alert(obj.id); // this gives me newID as required
var element = document.getElementById("newID");
if (element != null) { alert("Hooray"); // this alert never gets displayed! }
In diesem speziellen Fall in Ihrem Code so etwas wie dieses haben, document.getElementById("newID") werden Sie nicht wieder alles da das Element wurde der Seite nicht hinzugefügt und daher nicht auf der Seite gefunden.
Versuchen Sie folgendes:
Werke für mich
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
function ChangeID(elementId, newId) {
var obj = document.getElementById(elementId);
obj.id = newId;
}
function SetContent(elementId, content) {
var obj = document.getElementById(elementId);
obj.innerHTML = content;
}
</script>
<div id="div1"></div>
<a href="#" onclick="ChangeID('div1', 'div6');">ChangeID</a><br />
<a href="#" onclick="SetContent('div6', 'this is the contents');">Set Contents</a>
</body>
</html>
Verwenden Sie nicht 'javascript:' in 'onclick' Attribute; es ist nutzlos (eigentlich vergeben Sie nur ein JavaScript-Label auf diese Weise). –
war nur explizit. habe bearbeitet und entfernt. – jimplode
Ihren Code sieht gut aus, aber wenn man auf diese Weise in Ihrem Code zu kommentieren, können Sie erkennen, dass die Klammer nie aufgrund des Kommentars ist geschlossen .
if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace
+1 - großer Fang! –
Es gibt noch etwas zu beachten. Versuchen Sie dies zu tun, bevor das DOM bereit ist? Ist dieses Element schon geladen? Wenn Sie versuchen, ein Element zu ändern, das das DOM nicht in der Baumstruktur enthält, werden Sie im Hintergrund versagen.
Wie wird 'obj' zugewiesen? –
Unter welchem Browser haben Sie diesen Fall reproduziert? – HoLyVieR
Wurde das "obj" an das Dokument angehängt? – Alex