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

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

提问by Alan Wells

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

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

This is NOT a jQuery question.

这不是一个 jQuery 问题。

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

我的问题是：如何确定一个 HTML 元素是空的，还是没有被使用？例如：

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

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

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

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

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

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

When the user clicks the Registermenu tab, a function runs. I've tried using this to determine if content has been added already or not, but it doesn't work:

当用户单击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
      };

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

我得到的是undefinedDIV 中是否有任何内容。如何测试<div>元素是否已注入内容？

回答by Felix Kling

Elements generally don't have a valueproperty, only form control elements have such a property (e.g. inputelements). So, .valuewill alwaysbe undefinedfor div elements.

元素一般没有value属性，只有表单控件元素有这样的属性（例如inputelements）。因此，.value将永远是undefined对的div元素。

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

您可以检查元素有多少个子节点。如果没有，则元素为空：

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

---

---

If you only consider Element nodesas "content", you can use .childreninstead:

如果您仅将Element 节点视为“内容”，则可以.children改用：

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

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

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

回答by Akhlesh

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/

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