Qu'est-ce qu'un div vide signifie en Jquery ou Javascript

Question

je le vide suivant div dans ma page html:

<div id='onlineaccess' style='width:20em;'> 
</div> 

Je dois mettre à jour dynamiquement ce div avec html, mais avant de le faire, je dois voir s'il est vide ou non. J'ai écrit le code Javascript JQuery et suivant pour cela:

if($('#onlineaccess').is(':empty')) 
{alert('No HTML inside of onlineaccess div');} 
else 
{alert('Some HTML inside of onlineaccess div');} 

mais cela ne donne pas le résultat que je cherche si le div est vide.

if($('#onlineaccess').is(':empty')) 
 
{alert('No HTML inside of onlineaccess div');} 
 
else 
 
{alert('Some HTML inside of onlineaccess div');}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='onlineaccess' style='width:20em;'> 
 
    </div>

Cette alerte le second message même si le div est vide. Quelqu'un peut-il m'expliquer pourquoi est-ce le cas et comment puis-je obtenir le premier message dans l'alerte?

Merci d'avance pour votre aide.

Answer 1

https://api.jquery.com/empty-selector/

if($('#onlineaccess:empty')) 
 
{alert('No HTML inside of onlineaccess div');} 
 
else 
 
{alert('Some HTML inside of onlineaccess div');}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='onlineaccess' style='width:20em;'> 
 
    </div>

Answer 2

Vous devriez obtenir le code html() le contenu de votre carte d'identité devrait être donc

if($.trim($('#onlineaccess').html()) ==='') 

Answer 3

Il est le saut de ligne. Certains navigateurs semblent interpréter cela différemment des autres.

Ecrire cette façon:

<div id='onlineaccess' style='width:20em;'></div> 

et vous obtenez votre comportement prévu.

connexes: How do I check if an HTML element is empty using jQuery?

Answer 4

Le div est en fait pas vide, il a un nœud de texte à l'intérieur qui compte comme contenu non vides. Utilisez cette INSEAD:

$(document).ready(function() { 
 
    if ($("#onlineaccess").html() === "") { 
 
    console.log('empty'); 
 
    } else { 
 
    console.log('not empty'); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='onlineaccess' style='width:20em;'> 
 
</div>

Answer 5

var check = !$.trim($('#div').html()).length; 
 

 
if (check) { 
 
    console.log('no html'); 
 
} else { 
 
    console.log('some html'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id='div' style='width:20em;'> 
 
</div>