jQuery DOM - Missing elements, lengths 0

Question

Need some better understanding on DOM / Missing elements.

I use

$(document).ready(function(){ 
// show div tag
});

But I seem to be stuck with my elements being somehow not available in the DOM.

console.log($(".show_quota").length);     
console.log($(".show_restriction").length); 

Both lengths are 0. So these div tags are not in available in my DOM.

So what must I look for? How do I get these elements in the DOM? Any idea why these html form elements disappear of the DOM?

Doesn't $(document).ready(function() ensure all html elements appear in the dom? As long as the class and id are called correctly in jquery?

Update 1: Installed the Mozilla DOM Inspector - But overwhelmed by the info :)

But hey ... Looking at the good old source html ( via Inspect Element With Firebug) and the div tags dont show up... so ...no wonder the jquery commands dont work.

Update 2: The html markup is handled via;

    $('#modal').html("");

        var output = '<div class="modal-content">';
        output += 'some html stuff';
        output += '<div id="show_quota" >'; 
        output += 'some html stuff 2';
        output += '</div>'; 


    $('#modal').append(output);
    $('#modal').reveal();     

Update 3: ISSUE SOLVED;

By;

1. Uninstalling FireQuery ( Buggy on my setup )

2. Modified

     output += '<div id="show_quota" >'; // to line below output += '<div id="show_quota" style="display:inline" >'; 

3. These made the tags appear / disappear when the checkboxes were clicked.

Answer 1

Add something like this to the DOM...

<div class="show_quota"></div>
<div class="show_restriction"></div>

class is referenced with . and id is referenced with #

eg <div id="show_restriction"></div> would use console.log($("#show_restriction").length);

here's a fiddle if you need to test.