title: Dynamically change a div's ID?
body: <p>I have a bunch of divs with weird id and each of them contains a video. They're actually video embed codes but they're not usual to me. Here's one example: </p>
  
  <pre><code>&lt;div id="evp-1fae4e37639894816f03591bc7009c68-wrap" class="evp-video-wrap"&gt;&lt;/div&gt;&lt;script type="text/javascript" src="http://domain.com/evp/framework.php?div_id=evp-1fae4e37639894816f03591bc7009c68&amp;id=cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg%3D%3D&amp;v=1278525356"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;_evpInit('cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg==');&lt;/script&gt;
  </code></pre>
  
  <p>What I want to do is create a video playlist. As a part of that, I created list using divs also which use the onclick attribute to trigger my JS function to switch between videos. Here's how it looks:</p>
  
  <pre><code>&lt;div class="vid-list" onclick="switchvideo('http://domain.com/html-vids/headline-vids/second-vid.html', 2)"&gt;&lt;p&gt;This a video tutorial for blah blah blah.&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is, each time I switch to another video the div id of the embed code changes also because otherwise it won't work. So I need to change that before loading the video script inside the div. I tried to achieve that using the following JS function:</p>
  
  <pre><code>function switchvideo(url, vidnumber)
  {
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET",url,false);
    xmlhttp.send(null);
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.open("GET",url,false);
    xmlhttp.send();
    }
  
  var div_node = document.getElementByClass('evp-video-wrap');
  
  if ( vidnumber == 2 ) {
      div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap';
     }
  document.getElementById(div_node.id).innerHTML=xmlhttp.responseText;
  }
  </code></pre>
  
  <p>Apparently it's not working. I suspect the problem are the lines in bold above. I tried to get the element by 'class' and its id by using 'div_node.id'. I am assuming that by doing 'document.getElementByClass', I am getting the reference to that element so I could use it to manipulate its other attributes. But I am not sure... Could anyone pls enlighten me?? </p>