如果div存在，Javascript显示html

Question

我试图在我的页面上显示一个包含导航栏的表格(或 ul)，但只显示包含 html 上存在的名为 div 的 jquery 的选项卡。

本质上，它是一个包含所有 div 的单个 html 文档，jquery 隐藏除第一个之外的所有 div，并且导航栏将允许浏览每个 div。 现在我试图让它易于我的客户使用，以便菜单项仅在其 div 也存在时才存在。我已经完成了大部分工作，唯一的事情就是实际知道 div 是否存在。

我尝试使用这个:

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

当我将上述代码放入 div page1 中时，它返回 true。有没有办法从页面顶部而不是在 div 内执行此操作？

谢谢!

更新:

根据许多人的建议，我使用了以下内容:

$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'   ;
}
});

然后当我尝试使用时:

document.write(page);

它显示以下内容: [对象 HTMLBodyElement]

Answer 1

既然你已经使用了 jQuery，为什么不使用它呢？

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

编辑:正如 davin 指出的那样，您的代码应该在 DOM 渲染之后进行评估。您可以通过将其放入 $(document).ready 调用中来完成此操作:

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

编辑 2:根据 OP 的编辑，更好的解决方案是添加占位符元素并设置其内容(如 FishBasketGordo 建议的那样)。一个例子:

$(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>');
    }
});

文档中的其他地方...

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