title: Determine/Find if an HTML DIV element is empty or not used using JavaScript
body: <p>There is another post that could have possibly answered my question.  In order to have found that post, I would have needed to search for <code>child nodes</code> or <code>children</code>.  But the problem is, that I didn't know what child nodes or HTML children were at the time.</p>
  
  <p>This is NOT a jQuery question.  </p>
  
  <p>My question is: How is it determined whether an HTML element is empty, or not used?  For example:</p>
  
  <pre><code>&lt;div id="UserRegistration"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The above <code>&lt;div&gt;</code> element has no content.  As opposed to this:</p>
  
  <pre><code>&lt;div id="UserRegistration"&gt;
      &lt;label&gt;Password:&lt;/label&gt;
      &lt;input type="password" id="password" placeholder="Your New Password" required maxlength="32"/&gt;
      &lt;label&gt;Verify Password:&lt;/label&gt;
      &lt;input type="password" name="ReEnterPassword" id="reenterpassword" required maxlength="32"/&gt;&lt;br/&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>I am intentionally leaving elements empty, and then injecting HTML into them later when the user clicks a menu tab.  But I do not want to inject the same HTML multiple times if the user clicks the menu item multiple times.  To avoid this, I want the code to determine whether the element has already been injected with content.  I want to use Web API interface and JavaScript.  Content is added using <code>.innerHTML</code></p>
  
  <pre><code>document.getElementById('UserRegistration').innerHTML=VariableWithRetreivedContent;
  </code></pre>
  
  <p>When the user clicks the <code>Register</code> menu tab, a function runs.  I've tried using this to determine if content has been added already or not, but it doesn't work:</p>
  
  <pre><code>function goToRegistration(ElmtToGoTo, FileToGet) {
      //Use getElementById to get info from the ElmtToGoTo DIV
      // and put info into the el variable
      var el = document.getElementById(ElmtToGoTo);
      alert(el.value);
      // If element is already filled quit
      if (el.value === undefined || el.value === "")
        {
           /To Do:  Quit Here
        };
  
          //To Do: Get content and put it into DIV element
        };
  </code></pre>
  
  <p>What I get is <code>undefined</code> whether the DIV has anything in it or not.  How can I test for whether the <code>&lt;div&gt;</code> element has already been injected with content?</p>