JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<div id="div1"><p>asdf<span id="ms-rterangecursor-start" RteNodeId="1"></span><span id="ms-rterangecursor-end"></span></p></div>

<div id="div2"><p></p></div>

<div id="div3"><p>asdf</p></div>

JavaScript

//var $divNode = $('#div1');
//var $divNode = $('#div2');
var $divNode = $('#div3');
var html = $divNode.html();

//alert($(html).html().length);

if ( $(html).html().length > 0 ) {    
    alert ("not empty");
} else {
    alert ("empty");
}

// This does not work on div3
if ($(html).children().length > 0) {    
    alert ("not empty");
} else {
    alert ("empty");
}

// Barmar's solution - works on all 3 cases
if ($divNode.text() == '') {
    // we got <p></p>
    alert("empty");
    return false;  // go no further
} else {
    alert("not empty");
    return true;  // we're ok
}