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.

Answer 1

In JavaScript

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

In jQuery

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

JSFiddle example

Answer 2

$('#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>