JS innerHTML 不显示

Question

我正在尝试创建一个动态导航栏，当用户登录与未登录时会有所不同。

我的身份验证部分正常工作（通过控制台日志确认）；但是，由于某种原因，当我使用.innerHTML = ... 时，HTML 没有得到更新。更新后，我正在控制台记录 innerHTML，它在日志中显示正确，但导航栏未按应有的方式显示。

HTML：

...
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
    <li><a href="#" class="nav-link"><strong>Home</strong></a></li>
    <li id ="nav-listings">
        <a href="Search.html" class="nav-link"><strong>Listings</strong></a>
    </li>
    <li><a href="#contact-section" class="nav-link"><strong>Contact</strong></a></li>
    <li class="has-children" id="nav-account">
        <a href="Signin.html" class="nav-link"><strong>Sign-In</strong></a>
        <div id="navDropdown" class="dropdown">
            <a href="User.html">Profile</a>
            <a href="Signup.html">Sign-Up</a>
        </div>
    </li>
</ul>
...

js代码：

AOS.init({
    duration: 800,
    easing: 'slide',
    once: true
 });

 jQuery(document).ready(function($) {

    "use strict";


    $(".loader").delay(1000).fadeOut("slow");
    $("#overlayer").delay(1000).fadeOut("slow");

...

    firebase.auth().onAuthStateChanged(firebaseUser => {
        if (firebaseUser) {
            var username = firebaseUser.email;
            console.log(`${firebaseUser ? `- User signed in: ${firebaseUser.email} => ${username}` : "No User Signed in"}`);
            
            document.getElementById("nav-listings").className = "has-children";
            document.getElementById("nav-listings").innerHTML = "<a href='Search.html' class='nav-link'><strong>Listings</strong></a>" +
                                                                "<div id='listDropdown' class='dropdown'>" +
                                                                    "<a href='AddHouse.html'>Add Listing</a>" +
                                                                    "<a href='User.html'>Favorites</a>" + 
                                                                "</div>";
            console.log(document.getElementById("nav-listings").innerHTML);
        } else {
            btnLogin.disabled = false;
        }
    });
 });

编辑： 它以导航栏的压缩形式出现，但主要导航栏？？？ 请参阅Here 获取完整代码（减去 CSS ......这使得问题很难看到，但所有的 js 和 HTML 都在那里）。

Answer 1

这应该可以工作

HTML：

<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
    <li><a href="#" class="nav-link"><strong>Home</strong></a></li>
    <li id="nav-listings">
        <a href="Search.html" class="nav-link"><strong>Listings</strong></a>
    </li>
    <li><a href="#contact-section" class="nav-link"><strong>Contact</strong></a></li>
    <li class="has-children" id="nav-account">
        <a href="Signin.html" class="nav-link"><strong>Sign-In</strong></a>
        <div id="navDropdown" class="dropdown">
            <a href="User.html">Profile</a>
            <a href="Signup.html">Sign-Up</a>
        </div>
    </li>
</ul>

JavaScript：

    firebase.auth().onAuthStateChanged(firebaseUser => {
        if (firebaseUser) {
            var username = firebaseUser.email;
            console.log(`${firebaseUser ? `- User signed in: ${firebaseUser.email} => ${username}` : "No User Signed in"}`); ;
            $("#nav-listings").addClass('has-children').html("<a href='Search.html' class='nav-link'><strong>Listings</strong></a><div id='listDropdown' class='dropdown'><a href='AddHouse.html'>Add Listing</a><a href='User.html'>Favorites</a></div>")
            console.log($("#nav-listings").html());
        } else {
            btnLogin.disabled = false;
        }
    });

Answer 2

当您设置innerHTML 时，您也将nav-listings 的类设置为has-children。这将删除现有的 nav-link 类。

你的意思是这样做吗？如果你想保留 nav-link 类，那么而不是

document.getElementById("nav-listings").className = "has-children";

在 has-children 之前放置一个空格并将字符串添加到类名中。然后，这会将 has-children 添加到类中，并且不会删除导航链接。

document.getElementById("nav-listings").className += " has-children";

如果您控制台记录outerHTML 而不是innerHTML，您可以检查nav-link 和has-children 是否都存在。