Question

所以我真的只想用javascript检查元素是否为空，但没有jquery。当元素为空时，代码应该返回true，而当它包含内容时则相反。

比如说我有这个div需要检查它是否为空：

<div id="foo">

</div>

由于它是空的，代码应该返回true。但在下面的情况中：

<div id="cats">
<h1>Cats are awesome!</h1>
</div>

它应该返回false。

编辑：我真正需要的是检查它是否包含任何孩子。我找到了答案，你可以在评论部分找到它。

Answer 1

您可以使用document.getElementById().innerHTML或document.querySelector().innerHTML。然后检查返回的字符串是否包含任何内容。

＆＃13;

function hasAnything(selector) {
	return document.querySelector(selector).innerHTML.trim().length > 0;
}

const pre = document.querySelector('#pre')

pre.innerHTML = hasAnything('#test1');
pre.innerHTML += '\n' + hasAnything('#test2');
pre.innerHTML += '\n' + hasAnything('#test3');

＆＃13;

<div id='test1'>Content</div>
<div id='test2'><p>something else</p></div>
<div id='test3'></div>

<pre id='pre'></pre>

＆＃13;

Aaand就在jsfiddle上：https://jsfiddle.net/oniondomes/3k9u9tev/

Answer 2

根据代码中空格的使用，您可能会返回一个字符串，因此您可以修剪内容，然后检查字符串是否为空。

var contents = document.querySelector("#cats");
var result = contents.innerHTML.trim();
result == "" ? console.log(true) : console.log(false);

Answer 3

好吧，似乎有一个更容易解决这个问题的方法，当我看到有人将此帖标记为重复时，我意识到了这一点。

你可以使用

if(document.getElementById('foo').innerHTML.trim().length == 0) {
   <code to execute here>
}

感谢您的帮助：）

如何在没有jquery但使用javascript的情况下检查元素（div）是否为空

3 个答案: