9

How to set the div id dynamically? Here is my code:

<div id="q1"></div>
<div id="q2"></div>
<div id="q3"></div>
<div id="q4"></div>
<div id="q5"></div>

Now I want to set the q4 div id to q1 something like that in JavaScript. How can I do that in JavaScript or jQuery?

I have tried this.

 document.getElementById("q4").id = "q1"; 
 document.getElementById("q2").id = "q5";

but it is saying that the object is null or undefined.

Thanks. chakri.

JB.
  • 40,344
  • 12
  • 79
  • 106
Chakradhar
  • 753
  • 6
  • 14
  • 29
  • 2
    Where is the JavaScript code in your page? – Pointy Sep 22 '11 at 12:48
  • Your present code is correct. There's nothing wrong with it: http://jsfiddle.net/fPgYj/ – Joseph Marikle Sep 22 '11 at 12:53
  • 1
    *"Now I want to set the q4 div id to q1..."* Just be sure to change the original `q1` id to something else, so that you don't duplicate your IDs. – user113716 Sep 22 '11 at 13:02
  • 2
    I hate to be "that guy" and tell you to check out my post, but most of the answers are addressing the "not enough jQuery" problem, which isn't the issue here. The real problem is that you're trying to manipulate the DOM before it's ready. I only point this out because for some reason my post was down-voted a few times and might be easy to overlook... – jmar777 Sep 22 '11 at 13:04

8 Answers8

7

Using jquery:

set dynamically one by one:

var idCount = 1;
$('div').each(function() {
   $(this).attr('id', 'q' + idCount);
   idCount++;
});

to rearrange what you want:

$('div#q4').attr('id', 'q1');
$('div#q2').attr('id', 'q5');
Samich
  • 29,157
  • 6
  • 68
  • 77
4

$('#q1').attr('id', 'q4') it soulde work I think...

EDIT:

If it still doesnt work try put this before </body>:

<script>
    $(document).ready(function(){
        $('#q1').attr('id', 'q4')
    });
</sript>
Ernestas Stankevičius
  • 2,420
  • 2
  • 24
  • 30
  • 2
    Yes it is: `how can I do that in JavaScript or jQuery.` – Luwe Sep 22 '11 at 12:50
  • It is. `how can i do that in javascript or jquery.` – Ernestas Stankevičius Sep 22 '11 at 12:50
  • @jmar777 to quote the OP: "how can i do that in javascript or jquery." – DA. Sep 22 '11 at 12:50
  • 2
    My bad - somehow I missed that (+1). I'll update the tag on the question as well. – jmar777 Sep 22 '11 at 12:51
  • 2
    This is completely pointless... the present code provided by the poster works.... therefor this won't help either. The problem is somewhere else in the code. – Joseph Marikle Sep 22 '11 at 12:54
  • @Joseph - yep. the problem is that he's not waiting until the DOM is ready. Looks like Ernestas updated his answer now though. – jmar777 Sep 22 '11 at 12:58
  • 2
    @Ernestas - in your second code snippet you're waiting until the `ready` event, so it doesn't matter where he puts it, as long as it's after he links to jQuery. Also, in both of your examples you're setting the ID with a #' prefix, which I assume was unintentional. – jmar777 Sep 22 '11 at 12:59
2

Your code is fine, which means that if it's failing, you're probably running the JavaScript before those elements have been defined in the DOM. Try moving the script block to below those elements (e.g., the bottom of the page), or place your code in a DOM load/ready handler.

Edit: not sure why this is being down voted, but whatever. If you want to do this in jQuery while waiting for the DOM ready event, this should work: 
$(function() {
    $('#q4').attr('id', 'q1');
    $('#q2').attr('id', 'q5');
});

Please note that the important part here isn't the fact that setting the id is done in jQuery or vanilla JavaScript - the important part is that we're waiting until the DOM is ready for manipulation.

jmar777
  • 38,796
  • 11
  • 66
  • 64
2

First of all, you are giving the id to an element an id which is already given to some element before, that's not a right thing to do you can't have more than one id in your DOM. Anyway the code would be something like

    var element = document.getElementById('q4');
    element.setAttribute('id', 'q7');
    if(document.getElementById('q7').innerHTML = "All is well")
          alert(document.getElementById('q7').innerHTML);    //to check if the new id has been set correctly

Fiddle http://jsfiddle.net/kmSHB/

Ehtesham
  • 2,967
  • 1
  • 18
  • 20
1

In JavaScript

var yourElement = document.getElementById('originalID');
yourElement.setAttribute('id', 'yourNewID');

In jQuery

$('#originalID').attr('id', 'yourNewID');

JSFiddle example

danefondo
  • 525
  • 7
  • 15
1

Your code works fine. Except that after that you will have 2 divs with the same id. So you will run to problems if you try to get q1 again.

Jan Pfeifer
  • 2,854
  • 25
  • 35
1

Try this..

var divid = document.getElementById('q1');

divid.id = 'q5';

sharmila
  • 1,493
  • 5
  • 23
  • 42
0

in jQuery you could do this:

$('#q4').attr('id', 'q1');

However, note that that will now leave you with invalid markup, as you can't use the same ID more than once in a document.

DA.
  • 39,848
  • 49
  • 150
  • 213