ボタンを押下後、エレメントの最初の子要素を取得し、その要素の内容(例：a)をダイアログで表示したいのですが、undefinedと表示されます。どう修正すればよろしいでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>あいうえお商店</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <body>
    <div id="childcatch">
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
      <span>e</span>
    </div>
    <script type="text/javascript">
      function findElement() {
        var element = document.getElementById("childcatch");
        var child = element.firstChild;
        alert(child.innerHTML);
      }
    </script>
    <button onclick="findElement()">最初の子を取得</button>
  </body>
  </html>