Determine/Find if an HTML DIV element is empty or not used using JavaScript [duplicate]

Question

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 child nodes or children. But the problem is, that I didn't know what child nodes or HTML children were at the time.

This is NOT a jQuery question.

My question is: How is it determined whether an HTML element is empty, or not used? For example:

<div id="UserRegistration"></div>

The above <div> element has no content. As opposed to this:

<div id="UserRegistration">
    <label>Password:</label>
    <input type="password" id="password" placeholder="Your New Password" required maxlength="32"/>
    <label>Verify Password:</label>
    <input type="password" name="ReEnterPassword" id="reenterpassword" required maxlength="32"/><br/>  
</div>

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 .innerHTML

document.getElementById('UserRegistration').innerHTML=VariableWithRetreivedContent;

When the user clicks the Register 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:

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
      };

What I get is undefined whether the DIV has anything in it or not. How can I test for whether the <div> element has already been injected with content?

Answer 1

Elements generally don't have a value property, only form control elements have such a property (e.g. input elements). So, .value will always be undefined for div elements.

You can check how many child nodes the element has. If it has none, the element is empty:

if (el.childNodes.length === 0)

---

If you only consider Element nodes as "content", you can use .children instead:

if (el.children.length === 0)

.children is a list of element nodes. If your element only contains text, and you don't consider that as content, .children would be empty.

Answer 2

function goToRegistration(ElmtToGoTo, FileToGet) {
//Use getElementById to get info from the ElmtToGoTo DIV
// and put info into the el variable
 if(ElmtToGoTo){
 var el = document.getElementById(ElmtToGoTo);
}else
{
    alert("invalid element");
    return false;
}
//alert(el.innerHTML);
// If element is already filled quit
if (el.innerHTML === "") {
    el.innerHTML='<label>Password:</label> <input type="password" id="password" placeholder="Your New Password" required maxlength="32"/> <label>Verify Password:</label><input type="password" name="ReEnterPassword" id="reenterpassword" required maxlength="32"/><br/>';
};

// To Do: Get content and put it into DIV element
}

document.getElementById('btn').onclick=function(){
  goToRegistration('UserRegistration');
};

http://jsfiddle.net/xZHe9/3/