Dynamically setting div id in JavaScript or jQuery

Question

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.

Your present code is correct. There's nothing wrong with it: jsfiddle.net/fPgYj — Joseph Marikle
– Joseph Marikle, Commented Sep 22, 2011 at 12:53
"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
– user113716, Commented Sep 22, 2011 at 13:02
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
– jmar777, Commented Sep 22, 2011 at 13:04

Samich · Accepted Answer · 2011-09-22 12:51:08Z

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');

answered Sep 22, 2011 at 12:51

Samich

30.4k6 gold badges70 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ernestas Stankevičius · Accepted Answer · 2011-09-22 13:01:03Z

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>

edited Sep 22, 2011 at 13:01

answered Sep 22, 2011 at 12:48

Ernestas Stankevičius

2,5132 gold badges25 silver badges31 bronze badges

7 Comments

Luwe Over a year ago

Yes it is: how can I do that in JavaScript or jQuery.

Ernestas Stankevičius Over a year ago

It is. how can i do that in javascript or jquery.

jmar777 Over a year ago

My bad - somehow I missed that (+1). I'll update the tag on the question as well.

Joseph Marikle Over a year ago

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.

jmar777 Over a year ago

@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 · Accepted Answer · 2011-09-22 12:56:14Z

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.

edited Sep 22, 2011 at 12:56

answered Sep 22, 2011 at 12:50

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

Comments

Ehtesham · Accepted Answer · 2011-09-22 13:17:53Z

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/

edited Sep 22, 2011 at 13:17

answered Sep 22, 2011 at 13:02

Ehtesham

2,9851 gold badge20 silver badges22 bronze badges

Comments

Jan Pfeifer · Accepted Answer · 2011-09-22 12:51:22Z

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.

answered Sep 22, 2011 at 12:51

Jan Pfeifer

2,85130 silver badges37 bronze badges

Comments

sharmila · Accepted Answer · 2011-09-22 12:51:41Z

1

Try this..

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

divid.id = 'q5';

answered Sep 22, 2011 at 12:51

sharmila

1,5335 gold badges23 silver badges43 bronze badges

Comments

danefondo · Accepted Answer · 2019-03-03 17:23:17Z

1

In JavaScript

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

In jQuery

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

JSFiddle example

edited Mar 3, 2019 at 17:23

answered Mar 3, 2019 at 16:13

danefondo

5657 silver badges17 bronze badges

Comments

DA. · Accepted Answer · 2011-09-22 12:50:06Z

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.

answered Sep 22, 2011 at 12:50

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Collectives™ on Stack Overflow

Dynamically setting div id in JavaScript or jQuery

8 Answers 8

Comments

7 Comments

Comments

Comments

Comments

Comments

In JavaScript

In jQuery

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

7 Comments

Comments

Comments

Comments

Comments

In JavaScript

In jQuery

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related