title: Using Javascript DOM to get first element with tag name
body: <p>Im Trying to get the first element with the tag <code>&lt;figure&gt;</code> using the <code>getElementByTagName().firstChild[0].innerHTML</code> but I run into some problems when adding it to the content, i get <code>undefined</code>.</p>
  
  <p>Here is the javascript that I'm using.</p>
  
  <pre><code>function loopImage()
  {
      var value = document.getElementById("loopvalue").value; 
      var content = document.getElementById("contained");
      if(value &gt;= 1)
      {
      content.innerHTML = '&lt;br&gt;&lt;input type="button" value="Search" onClick="loopImage()"&gt;&lt;input type="text" id="loopvalue"&gt;&lt;br&gt;&lt;br&gt;';
      for(var i =0;i&lt; value; i++)
      {
          content.innerHTML = content.innerHTML + content.getElementByTagName('figure').firstChild[0].innerHTML;
      }
      content.innerHTML = content.innerHTML + '&lt;style&gt;figure:nth-of-type(2n+2){background:black;color:red;}&lt;/style&gt;';
      }
      else if(value == "") location.reload();
      else if(value &lt;= 0) alert("Positive Numbers only!");
      else alert("Are you sure that was a number?")
  }
  </code></pre>
  
  <p>And here is the HTML that I'm trying to get the content from,</p>
  
  <pre><code>&lt;div class="container" id="contained"&gt;
      &lt;br&gt;
  
      &lt;input type="button" value="Search" onClick="loopImage()"&gt;
      &lt;input type="text" id="loopvalue"&gt;
  
  
  &lt;br&gt;&lt;br&gt;
  &lt;figure&gt;
      &lt;a href="photos/DSC01049.JPG"&gt;
          &lt;img src = "photos/DSC01049.JPG" alt="City view" height="200" width="200"&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;City View&lt;/figcaption&gt;
  &lt;/figure&gt;
  
  &lt;figure&gt;
      &lt;a href="photos/DSC01066.JPG"&gt;
          &lt;img src = "photos/DSC01066.JPG" alt="City view" height="200" width="200"&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;Ferris Wheel&lt;/figcaption&gt;
  &lt;/figure&gt;
  
  &lt;figure&gt;
      &lt;a href="photos/DSC02511.JPG"&gt;
          &lt;img src = "photos/DSC02511.JPG" alt="City view" height="200" width="200"&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;Old Mates House&lt;/figcaption&gt;
  &lt;/figure&gt;
  
  &lt;figure&gt;
      &lt;a href="photos/DSC03810.JPG"&gt;
          &lt;img src = "photos/DSC03810.JPG" alt="City view" height="200" width="200"&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;City Skyline&lt;/figcaption&gt;
  &lt;/figure&gt;
  
  &lt;figure&gt;
      &lt;a href="photos/DSC05750.JPG"&gt;
          &lt;img src = "photos/DSC05750.JPG" alt="City view" height="200" width="200"&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;Beach&lt;/figcaption&gt;
  &lt;/figure&gt;
  
  
  &lt;/div&gt;
  </code></pre>