Question

还有另一篇文章可能回答了我的问题。为了找到该帖子，我需要搜索child nodes或children。但问题是，我当时不知道子节点或HTML子节点是什么。

这不是一个jQuery问题。

我的问题是：如何确定HTML元素是空的还是未使用？例如：

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

上述<div>元素没有内容。与此相反：

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

我故意将元素留空，然后在用户单击菜单选项卡时将HTML注入其中。但是如果用户多次单击菜单项，我不想多次注入相同的HTML。为了避免这种情况，我希望代码确定元素是否已经注入了内容。我想使用Web API接口和JavaScript。使用.innerHTML

添加内容

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

当用户点击Register菜单标签时，会运行一个功能。我已经尝试使用它来确定是否已添加内容，但它不起作用：

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

我得到的是undefined DIV是否包含任何内容。如何测试<div>元素是否已注入内容？

Answer 1

元素通常没有value属性，只有表单控件元素具有这样的属性（例如input elements）。因此，对于div元素，.value 总是为undefined。

您可以查看该元素有多少child nodes。如果没有，则元素为空：

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

如果您只将元素节点视为＆＃34;内容＆＃34;，则可以改为使用.children：

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

.children是元素节点列表。如果您的元素仅包含文字，并且您不将其视为内容，则.children将为空。

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/

确定/查找HTML DIV元素是否为空或未使用JavaScript

2 个答案: