如果div存在，Javascript显示html

Question

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

本质上，它是一个包含所有 div 的 html 文档，jquery 隐藏除第一个 div 之外的所有 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...
    }
});

EDIT 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>

Answer 2

如果将其放置在页面顶部，则代码运行时 page1 div 不存在。如果您使用的是 jQuery，将代码放在 $(document).ready 事件中< /a>.然后，您可以将其放置在标记内您想要的位置。这是一个例子：

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

虽然，我不会考虑使用 document.write，而是考虑使用占位符 span 或 div，并设置它的 innerHTML 属性 (或使用 jQuery 的 html 方法）。我还会使用 CSS 作为我的样式，而不是 标签，但这完全是另一回事。

Answer 3

您可以使用

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

或者查看这篇文章以获得更优雅的解决方案
jQuery 是否有“exists”函数？