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

还有一篇帖子可能回答了我的问题。为了找到那篇文章，我需要搜索

子节点

或

子节点

。但问题是，我当时不知道什么是子节点或HTML子节点

这不是jQuery问题

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

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

当用户单击

注册

菜单选项卡时，将运行一个函数。我尝试使用此选项确定内容是否已添加，但不起作用：

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

---

我得到的是

未定义

DIV中是否包含任何内容。如何测试

元素是否已经注入了内容？

元素通常没有

值

属性，只有表单控件元素具有这样的属性（例如）。因此，对于div元素，

.value

始终是

未定义的

您可以检查元素的数量。如果没有，则元素为空：

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

---

如果只考虑<强>元素节点< /强>为“内容”，则可以使用<代码>。

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

.children

是元素节点的列表。如果元素只包含文本，并且不将其视为内容，则<>代码>子< /代码>将是空的。

<代码>函数GoOrrGeTestOrn（ELMTGOTO，FIRTEOGET）{

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

//使用getElementById从ElmtToGoTo分区获取信息 //并将信息放入el变量中 如果（Elmtotogto）{ var el=document.getElementById（elmtogoto）； }否则 { 警报（“无效元素”）； 返回false； } //警报（el.innerHTML）； //如果元素已填充，请退出 如果（el.innerHTML==“”）{ el.innerHTML='Password:验证密码：
； }; //要做的事情：获取内容并将其放入DIV元素 } document.getElementById（'btn'）。onclick=function（）{ goToRegistration（“用户注册”）； };

---

我建议您在这里查看这篇文章。您正在使用value属性，该属性仅对输入元素有效，如果您想知道特定元素是否具有childNodes，您可以通过像el.childNodes.Length一样访问该元素并检查其是否具有childNodes，并且检查值不是0，或者将该元素的innerHTML或innerText存储到一个变量中，然后检查它是否为空字符串（后者）（内部文本）如果不在DIV中注入html而只注入文本，可能更适合您。我使用的术语是在DIV中查找内容，而不是在DIV元素中查找节点或子元素。在我问这个问题时，我甚至没有想过在DIV元素中搜索与节点或子元素有关的任何内容。而且这不是cle对我来说，一个DIV中只有一个单词的文本，或者甚至一个错误的空间都会被认为是DIV或节点中的一个孩子。哦，该死，我太慢了，这就是你做的方式=）非常好。或者，我喜欢这样做：

如果（element.firstChild）{/*element是非空的*/}

或者

如果（！element.firstChild）{/*element是空的*/}

。如果我在DIV

占位符

中有这个文本，该文本

占位符

会被视为子节点吗？@SandyGood:Yes，文本节点也是子节点。甚至空格也是文本节点：

。请参阅我的edit.divelement.children.length对我来说已经足够了。谢谢！：）

.innerHTML

是否返回

未定义的
？否。对不起，我的错误。我已经更新了代码。谢谢……：）
if (el.children.length === 0)

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