changing id's of TD tags dynamically is not permanent
<p>I want to change Id of TD tag dynamically. I tried following </p>

<pre><code>var div_node;           

div_node = document.getElementById(old_id);

div_node.id = new_id;
</code></pre>

<p>but effect of changing Id is not permanent. if I write some statements after this, it give original id only. I mean If I do alert(div_node.id), It gives original Id Only.</p>

<p>here is My Whole Program.</p>

<p>jsAnim.js is javascript library. i have included it. Available at
<a href="http://jsanim.com/" rel="nofollow">http://jsanim.com/</a></p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="jsAnim.js"&gt; &lt;/script&gt;

        &lt;script&gt;

        function Assign_id()   //This function Will execute onload
        {
        j=0;
        for(i=1;i&lt;4;i++)C
        {
            document.getElementsByTagName("td")[j].setAttribute("id",i);
            //alert(document.getElementsByTagName("td")[j].id);
            j++;
        }
        }

        function getdata()
        {
            var old_id=prompt("Enter Box Id.");
            var new_id=prompt("Enter New Position");
            animate(old_id,new_id);
            change_id(old_id,new_id);

        }

        function animate(old_id,new_id)
        {
            var manager=new jsAnimManager();
            obj=document.getElementById(old_id);
            obj.style.position="relative";
            var anim=manager.createAnimObject(old_id);
            anim.add({property: Prop.top, to: 100, duration: 2000});
            anim.add({property: Prop.left, to: ((new_id-old_id)*50)+4, duration: 2000});
            anim.add({property: Prop.top, to: 0, duration: 2000});

            obj=document.getElementById(new_id);
            obj.style.position="relative";
            var anim=manager.createAnimObject(new_id);
            anim.add({property: Prop.bottom, to: 100, duration: 2000});
            anim.add({property: Prop.right, to: ((new_id-old_id)*50)+4, duration: 2000});
            anim.add({property: Prop.bottom, to: 0, duration: 2000});
        }

        function change_id(old_id,new_id)
        {
            var div_node;
            div_node = document.getElementById(old_id);
            div_node.id = new_id;
            alert(div_node.id);     //HERE IT IS GIVING CORRECT CHANGED ID;

            var div_node1 = document.getElementById(new_id);
            div_node1.id = old_id;

            alert(div_node.id);     //BUT HERE IT AGAIN GIVE ORIGINAL ID ONLY
            alert(div_node1.id);
        }
    &lt;/script&gt;
&lt;/head&gt;



&lt;body onload="Assign_id()"&gt;

    &lt;table border="1" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;

    &lt;td width="50" height="100" background="pic.png"&gt;
    &lt;font size="10" align="center"&gt;A&lt;/font&gt;
    &lt;/td&gt;

    &lt;td width="50" height="100" background="pic.png"&gt;
    &lt;font size="10" align="center"&gt;B&lt;/font&gt;
    &lt;/td&gt;


    &lt;td width="50" height="100" background="pic.png"&gt;
    &lt;font size="10" align="center"&gt;C&lt;/font&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;

    &lt;button onclick="getdata()"&gt; NEXT &lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
