CODEWITHSUNDEEP
javascriptjquerygetelementbyid
Sherif
Sherif

Reputation: 359

Javascript display html if div exists

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]

Upvotes: 0

Views: 3779

Answers (3)

RoccoC5
RoccoC5

Reputation: 4213

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>

Upvotes: 1

FishBasketGordo
FishBasketGordo

Reputation: 23132

If you place it at the top of the page, the page1 div doesn't exist when the code runs. If you are using jQuery, place the code in a $(document).ready event. Then, you can put it where you want it within the markup. Here's an example:

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

Although, rather than doing a document.write, I would consider having a placeholder span or div, and setting it's innerHTML property (or use jQuery's html method). I would also use CSS for my style instead of <b> tags, but that's another matter entirely.

Upvotes: 1

Joel McBeth
Joel McBeth

Reputation: 1318

You can use

if ($(selector).length > 0) {
    // element exists
}

or you can check out this post for a more elegant solution Is there an "exists" function for jQuery?

Upvotes: 0

Related Questions