HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery count elements</title>
  <style>
    #test { padding: 12px; border: 1px dashed #94a3b8; margin-top: 8px; }
    #log { font-family: monospace; margin-top: 12px; white-space: pre-line; }
  </style>
</head>
<body>
  <p>Open DevTools console or read the log below.</p>
  <div id="test">
    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>
    <button type="button">Button</button>
  </div>
  <div id="log"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var totalInPage = $("*").length;
    var totalInPanel = $("#test").find("*").length;
    console.log("Document:", totalInPage);
    console.log("#test panel:", totalInPanel);
    $("#log").text("Document: " + totalInPage + "\n#test panel: " + totalInPanel);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .length — count without styling (Try It)