Question

I am trying to display a table (or ul) that will contain a navigation bar on my page, but only displays the tabs that will contain jquery called divs present on the html.

Essentially, it’s a single html document that contains all divs, jquery hides all divs but the first, and the nav bar will allow to navigate through each.
Now I am trying to make it easy to use for my client, so that the menu items will only exist if the div for it also exists. I’ve got most of it done, the only thing is actually knowing if a div exists.

I tried using this:

if(document.getElementById("page1")) {
document.write("<b>Good morning</b>");}
else 
{
document.write("<b>Bad morning </b>");
}

When I place the above code within the div page1, it returns true. Is there no way to do it from the top of the page and not within the div?

Thanks!

Update:

As suggested by many, I have used the following:

$j(document).ready(function(){
    //Hide the sections we don't need right away
    $j("#page2").hide();
    $j("#page3").hide();
    $j("#page4").hide();
    if ($j('#page1').length > 0) {
var page = 'Excellent Morning'   ;
}
});

Then when I try to use:

document.write(page);

It displays the following instead:
[object HTMLBodyElement]

Answer 1

Why not use jQuery since you are already?

if ($('#page1').length > 0) {
    // do stuff...
}

EDIT: As davin pointed out, your code should be evaluated after the DOM has been rendered. You can do this by placing it in a $(document).ready call:

$(document.ready(function() {
    if ($('#page1').length > 0) {
        // do stuff...
    }
});

EDIT 2: Based on the OP’s edits, a better solution would be to add a placeholder element and to set its content (like FishBasketGordo suggested). An example of this:

$(document.ready(function() {
    //Hide the sections we don't need right away
    $("#page2, #page3, #page4").hide();
    if ($('#page1').length) {
        $('#myPlaceHolder').html('<b>Good Morning</b>');
    }
    else
    {
        $('#myPlaceHolder').html('<b>Bad Morning</b>');
    }
});

Somewhere else in the document…

<span id="myPlaceHolder"></span>