title: Get the nth child of a div by pure JavaScript
body: <p>I have a div element called 'myDiv'. How can I get the nth child of 'myDiv' by <a href="https://en.wikipedia.org/wiki/Document_Object_Model" rel="nofollow noreferrer">DOM</a> manipulation?</p>
  <p>Markup:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function revealNibble(n) {
      // Do something here...
      var elements=document.getElementById('myDiv').children;
      for(var i=1; i&lt;=elements.length; i++) {
          if(n === i) {
              var output = elements[i].innerText || elements[i].textContent;
              document.getElementById('output').innerHtml = output;
          }
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="myDiv"&gt;
          &lt;p&gt;One&lt;/p&gt;
          &lt;p&gt;Two&lt;/p&gt;
          &lt;p&gt;Three&lt;/p&gt;
          &lt;p&gt;Four&lt;/p&gt;
          &lt;p&gt;Five&lt;/p&gt;
      &lt;/div&gt;
      &lt;hr/&gt;
      &lt;div id="output"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My code does not work!</p>