显示和隐藏导航栏（有一个按钮 "View Cart"）、隐藏（css）或 innerHtml 的更好做法？

Question

我有一个导航栏，我想在将商品添加到购物车时显示它。我尝试使用 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");
}

或使用 innerHtml（无效）：

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

Answer 1

只是 show/hide 导航栏容器而不是内部导航栏容器是最佳实践HTML。

不重新解析整个内部就没有追加支持HTML。这使得直接更改 innerHTML 非常慢。

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

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

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

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

旧内容替换问题：即使使用 object.innerHTML = object.innerHTML + 'html' 而不是 object.innerHTML += '[=，旧内容也会被替换45=]'。如果不重新解析整个 innerHTML，就无法追加。因此，使用 innerHTML 变得非常慢。当需要创建动态 DOM 元素时，字符串连接不会缩放，因为加号和报价开盘价变得难以跟踪。
可以破坏文档：innerHTML 没有提供正确的验证，因此可以使用任何有效的 HTML 代码。这可能会破坏 JavaScript 的文档。连破HTML都可以用，可能会出现意想不到的问题
也可用于 Cross-site 脚本（XSS）：innerHTML 可以向网页添加文本和元素，很容易被恶意用户用来操纵和显示不良内容或其他 HTML 元素标签中的有害元素。 Cross-site 脚本也可能导致敏感信息丢失、泄露和更改。

显示和隐藏导航栏（有一个按钮 "View Cart"）、隐藏（css）或 innerHtml 的更好做法？

Better practice of showing and hiding navigation bar, (having a button "View Cart"), hidden (css) or innerHtml?

javascript

css

innerhtml

hidden