title: Why are nextElementSibling and nextSibling null when sibling exists?
body: <p>In this HTML structure:</p>
  
  <pre><code>&lt;table id="outside"&gt;
    &lt;tr&gt;
      &lt;td id="t1"&gt;one&lt;/td&gt;
      &lt;td&gt;a&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="t2"&gt;two&lt;/td&gt;
      &lt;td&gt;b&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Why does the following script:</p>
  
  <pre><code>// Function to change the content of t2
  function modifyText() {
    var t2 = document.getElementById("t2");
    console.dir(t2.firstChild.nextElementSibling);
    console.dir(t2.firstChild.nextSibling);
    if (t2.firstChild.nodeValue == "three") {
      t2.firstChild.nodeValue = "two";
    } else {
      t2.firstChild.nodeValue = "three";
    }
  }
  
  // add event listener to table
  var el = document.getElementById("outside");
  el.addEventListener("click", modifyText, false);
  </code></pre>
  
  <p>why do <code>nextElementSibling</code> and <code>nextSibling</code> have null values. I would expect them to be the sibling <code>td</code> tags. </p>
  
  <p><a href="http://jsbin.com/qesifiti/1/edit" rel="nofollow">JSBIN</a></p>