如何解决JS innerHTML不显示
我正在尝试创建一个动态导航栏,当用户登录与未登录时,导航栏会有所不同。
我有auth部分在工作(已通过控制台日志确认);但是,由于某些原因,当我使用.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都在那里)。
解决方法
这应该有效
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;
}
});
,
在设置innerHTML时,还将导航列表的类设置为has-children。这将删除现有的nav-link类。
您是要这样做吗?如果您还想保留nav-link类,则不要使用
document.getElementById("nav-listings").className = "has-children"
;
在has-children之前放置一个空格,并将字符串添加到类名中。然后,这会将has-children添加到该类中,并且不会删除导航链接。
document.getElementById("nav-listings").className += " has-children"
;
如果您用console.log记录externalHTML而不是innerHTML,则可以检查是否存在nav-link和has-children。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。