Javascript 如何检查div元素是否为空

可能重复：

我有一个像这样的空div：

<div id="cartContent"></div>

我需要检查一下它是否是空的。如果为空，则需要返回true，然后添加一些元素。如果不是，则返回false并执行其他函数。检查div中是否有元素的最佳方法是什么

---

谢谢

您可以使用is功能

if( $('#cartContent').is(':empty') ) { }

或者使用长度

if( $('#cartContent:empty').length ) { }

你可以用

或者，您可以只测试属性，看看是否找到了一个：

if( $('#leftmenu:empty').length ) {

您可以使用

$.trim（）

删除空白（如果您需要的话）并检查内容的长度

if( !$.trim( $('#leftmenu').html() ).length ) {

使用普通javascript

 var isEmpty = document.getElementById('cartContent').innerHTML === "";

如果您使用jquery，它可以像

 var isEmpty = $("#cartContent").html() === "";

---

正如其他人已经指出的，您可以在jQuery中使用

：empty

，如下所示：

$('#cartContent:empty').remove();

$('#cartContent:not(:space)').append('<p>It is not empty</p>');

如果

#cartContent

div为空，它将删除该div

但是，人们在这里建议的这种技术和其他技术可能无法满足您的需要，因为如果它有任何包含空格的文本节点，则不会认为它是空的。所以这不是空的：

<div> </div>

现在你可以使用

$('#cartContent:space').remove();

如果div为空或仅包含空格，则将删除该div。当然，你不仅可以移除它，还可以做任何你喜欢的事情，比如

$('#cartContent:space').append('<p>It is empty</p>');

我推出了这个测试，它可靠地完成了我想要的，您可以将它从插件中取出，作为独立测试使用：

这将适用于jQuery对象：

function testEmpty($elem) {
  return !$elem.children().length && !$elem.text().match(/\S/);
}

此选项适用于DOM节点：

function testEmpty(elem) {
  var $elem = jQuery(elem);
  return !$elem.children().length && !$elem.text().match(/\S/);
}

这比使用

.trim

要好，因为上面的代码首先测试被测试元素是否有子元素，如果有子元素，它会尝试查找第一个非空白字符，然后停止，如果它有一个非空白字符，则无需读取或修改字符串

---

希望有帮助。

我不同意将此标记为重复。问题在于确定javascript中的空元素。不是jQuery。在很多用例中，这种细微的差异是非常显著的。不是每个人都可以访问项目中的jQuery，而且问题并没有特别提到jQuery。这不是一个重复的问题，即使是以重复的方式回答。我猜这是用“jquery”标记的，所以可能OP真的想问重复的问题。看：。您需要先修剪字符串…@elclanrs更新为修剪空白这是错误的

if（$（'#cartContent'）.length）

。使用

if（$（'#cartContent:empty'）.length）

+1进行更正和快速回复：）感谢yogesh的更正。从本质上说，p不是在寻找儿童，只是zero content.OP在寻找jQuery。而且，

==

是邪恶的<首选代码>=。

document.getElementById（'cartContent'）.html

-->

未定义

，无论实际元素是什么。

！element.hasChildNodes（）

注意：如果以编程方式删除内容，element.hasChildNodes（）将不起作用。调用

xx.innerHTML

或

xx.children.length

更可靠，这两种方法有细微的不同！如果div有时很大，那么复制和修剪HTML可能会对性能产生不良影响。在过去，当我的测试元素要么是空的（只包含空格的文本节点），要么包含大量HTML时，我实际上遇到了这种方法的问题。请看我的答案，看看我的建议。@rsp同意。与任何JavaScript一样，一旦您的数据以各种方式变大，就应该开始研究“惰性”数据处理了。不过，在大多数基本应用中，这种技术可以很好地工作。和往常一样，在设计应用程序时，应该考虑体系结构以及数据的大小和类型。

$('#cartContent:space').append('<p>It is empty</p>');

$('#cartContent:not(:space)').append('<p>It is not empty</p>');

function testEmpty($elem) {
  return !$elem.children().length && !$elem.text().match(/\S/);
}

function testEmpty(elem) {
  var $elem = jQuery(elem);
  return !$elem.children().length && !$elem.text().match(/\S/);
}