2010-09-24 3 views
6

Ho una variabile javascript obj che rappresenta un elemento nel DOM e desidero cambiare il suo ID. Ho tentato di farlo con quanto segue, il che dimostra anche che non funziona!Posso cambiare l'ID di un elemento HTML usando Javascript?

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

Cosa c'è di sbagliato nel mio codice sopra che significa che l'ID sembra essere cambiato ma non raccolto nel DOM? Molte grazie in anticipo.

+2

Come viene assegnato 'obj'? –

+0

Sotto quale browser hai riprodotto questo caso? – HoLyVieR

+2

Il "obj" è stato aggiunto al documento? – Alex

risposta

3

Il codice che mostri funziona; il problema è probabilmente nel codice che cerca e assegna obj. La mia ipotesi è che questo sia solo un oggetto javascript, non una parte dell'albero DOM.

+0

grazie - questo era esattamente il problema! – user455141

-2

Sì, è possibile, ecco una soluzione con jQuery

$("#xxx").attr("id", "yyy"); 

o

getElementById("xxx").setAttribute("id", "yyy"); 
+5

-1 L'OP non ha specificato che vogliono usare jQuery e questo dovrebbe essere raggiungibile usando puro JavaScript. Questo non sta rispondendo alla sua domanda sul motivo per cui l'ID è cambiato, ma non è stato trovato di nuovo da "getElementById". – GenericTypeTea

+0

l'equivalente javascript è obj.setAttribute ("id", "yourid") – Tim

+0

@Tim, in realtà 'obj.id =" foo ";' è l'equivalente più semplice. – GenericTypeTea

3

Non c'è alcun motivo per cui questo non dovrebbe funzionare con puro JavaScript. Ecco un working fiddle che mostra che funziona. Non dovresti avere bisogno di una soluzione jQuery o di qualsiasi altro metodo JavaScript, id = "foo"; è il modo più semplice di cambiare un ID DOM.

Dai un'occhiata al mio violino di sopra e prova a vedere qual è la differenza tra il tuo codice e il mio.

5

Dal momento che non ci hai dare l'intero codice la mia ipotesi è che probabilmente hanno qualcosa di simile a questo nel codice

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 quel caso particolare, document.getElementById("newID") non vi restituisce nulla poiché l'elemento non è stato aggiunto alla pagina e quindi non è stato trovato nella pagina.

0

Prova questo:

funziona per me

<!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> 
+1

Non utilizzare 'javascript:' negli attributi 'onclick'; è inutile (in realtà, stai semplicemente assegnando un'etichetta JavaScript in questo modo). –

+0

era solo esplicito. ho modificato e rimosso. – jimplode

1

Il codice guarda bene, anche se si sta commentando in questo modo nel codice, è possibile rendersi conto che la coppia non è mai chiusa a causa del commento .

if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace 
+0

+1 - ottima cattura! –

0

C'è un'altra cosa da considerare. Stai cercando di farlo prima che il DOM sia pronto? L'elemento è già caricato? Se provi a cambiare un elemento che il DOM non ha nell'albero, fallirai tranquillamente.