Javascript 显示和隐藏导航栏（具有“查看购物车”按钮）、隐藏（css）或innerHtml的更好实践？

我有一个导航栏，我想在商品添加到购物车时显示它。我尝试使用innerHtml，但它不起作用，所以我使用css属性隐藏它。我想知道哪种做法更好？如果innerHtml是一个更好的实践，那么我如何才能正确地进行呢？ 使用css：

.hidden{
    display: none !important;
}

<nav class=" navbar fixed-bottom  navbar-expand-lg navbar-dark bg-info " id="checkoutnav">
  <button type="button" class="btn btn-success mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true">
     View Cart
  </button>
</nav>

function hidecheckoutnav(){
    let checkoutnav = document.getElementById('checkoutnav');
    checkoutnav.classList.add("hidden");
}

。隐藏{
显示：无！重要；
}
查看购物车
函数hidecheckoutnav（）{
让checkoutnav=document.getElementById（'checkoutnav'）；
checkoutnav.classList.add（“隐藏”）；
}

或者使用innerHtml（不起作用）：

document.getElementById（'nav'）.innerHTML='View Cart'

仅显示/隐藏navbar容器是最佳实践，而不是innerHTML

如果不重新分析整个innerHTML，就没有追加支持。这使得直接更改innerHTML非常缓慢

innerHTML不提供验证，因此我们可能会在文档中插入有效且已破坏的HTML并破坏它

• innerHTML的使用非常缓慢：使用innerHTML的过程要慢得多，因为它的内容构建缓慢，而且已经解析的内容和元素也要重新解析，这需要时间
• 保留附加到任何DOM元素的事件处理程序：事件处理程序不会附加到通过自动设置innerHTML创建的新元素。为此，必须跟踪事件处理程序并手动将其附加到新元素。这可能会导致某些浏览器出现内存泄漏
• 内容在任何地方都会被替换：使用innerHTML在网页上添加、附加、删除或修改内容，所有内容都会被替换，元素中的所有DOM节点也会被重新解析和创建
• 不支持追加到innerHTML：通常，+=用于在JavaScript中追加。但是在使用innerHTML附加到Html标记后，整个标记将被重新解析。 例如：

极客
title=document.getElementById（“#geek”）
//整个“极客”标签被重新解析
title.innerHTML+='forgeks
'

• 旧内容替换问题：即使使用object.innerHTML=object.innerHTML+'html'代替object.innerHTML+='html'，旧内容也会被替换。如果不重新分析整个innerHTML，就无法进行追加。因此，使用innerHTML变得非常缓慢。当需要创建动态DOM元素时，字符串连接就不能伸缩，因为加号和引号的开始和结束变得难以跟踪
• 可以破坏文档：innerHTML没有提供正确的验证，因此可以使用任何有效的HTML代码。这可能会破坏JavaScript的文档。甚至可以使用损坏的HTML，这可能会导致意外问题
• 也可用于跨站点脚本（XSS）：innerHTML可以向网页添加文本和元素，恶意用户很容易利用这一事实操纵和显示其他HTML元素标记中不需要的或有害的元素。跨站点脚本还可能导致敏感信息的丢失、泄漏和更改

document.getElementById('nav').innerHTML ='<nav class=" navbar fixed-bottom  navbar-expand-lg navbar-dark bg-info " id="checkoutnav"><button type="button" class="btn btn-success mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true">View Cart</button></nav>'

<p id="geek">Geeks</p>
title = document.getElementById('#geek')

// The whole "geek" tag is reparsed
title.innerHTML += '<p> forGeeks </p>'