title: Using DOM nextSibling
body: <p>I'm writing a userscript for a page which has this HTML code block..</p>
  
  <pre><code>&lt;span id="mediaSetUfiLikeLink"&gt;
      &lt;button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like"&gt;
          &lt;span class="default_message"&gt;Like&lt;/span&gt;
          &lt;span class="saving_message"&gt;Unlike&lt;/span&gt;
      &lt;/button&gt;
  &lt;/span&gt;
  
  &lt;span&gt;
      &lt;a href="/ajax/sharer/?s=3&amp;appid=2305272732&amp;p[]=1012781954&amp;p[]=2063763" rel="dialog"&gt;Share&lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I need to add an <code>id</code> tag to the <strong>last</strong> <code>span</code> block. (below one)</p>
  
  <pre><code>&lt;span&gt;
      &lt;a href="/ajax/sharer/?s=3&amp;appid=2305272732&amp;p[]=1012781954&amp;p[]=2063763" rel="dialog"&gt;Share&lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I'm got to this point using this,</p>
  
  <pre><code>document.getElementById("mediaSetUfiLikeLink").getElementsByTagName("span")[1];
  </code></pre>
  
  <p>I tried getting the last <code>span</code> using <code>nextSibling</code> like this, which returned <code>null</code></p>
  
  <pre><code>document.getElementById("mediaSetUfiLikeLink").getElementsByTagName("span")[1].nextSibling;
  </code></pre>
  
  <p>Can someone please help me out with this? Just to be clear once again, I want to 'gain access' to the last <code>span</code> block so that I can add an <code>id</code> attribute to it..</p>
  
  <p><strong>P.S</strong> - I need to do this <strong>without</strong> using jQuery or any other external library. Pure JavaScript only.</p>
  
  <p>Thank you</p>