显示和隐藏导航栏（有一个按钮“查看购物车”）、隐藏（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

仅显示/隐藏导航栏容器是最佳实践，而不是 innerHTML。

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

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

• innerHTML 的使用非常慢：使用 innerHTML 的过程要慢得多，因为它的内容构建缓慢，而且已经解析的内容和元素也需要重新解析，这需要时间。

• 保留附加到任何 DOM 元素的事件处理程序：事件处理程序不会附加到通过自动设置 innerHTML 创建的新元素。为此，必须跟踪事件处理程序并将其手动附加到新元素。这可能会导致某些浏览器出现内存泄漏。

• 内容随处替换：无论您使用 innerHTML 在网页上添加、追加、删除或修改内容，所有内容都会被替换，该元素内的所有 DOM 节点也会被重新解析和重新创建。

• 不支持追加到 innerHTML：通常，+= 用于在 JavaScript 中追加。但是在使用 innerHTML 附加到 Html 标签时，整个标签被重新解析。例子：

<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 += 'html'，旧内容也会被替换。如果不重新解析整个 innerHTML，就无法追加。因此，使用 innerHTML 变得非常慢。当需要创建动态 DOM 元素时，字符串连接不会缩放，因为加号和引号开始和结束变得难以跟踪。

• 可以破坏文档：innerHTML 没有提供适当的验证，因此可以使用任何有效的 HTML 代码。这可能会破坏 JavaScript 的文档。甚至可以使用损坏的 HTML，这可能会导致意想不到的问题。

• 也可用于跨站点脚本 (XSS)：innerHTML 可以向网页添加文本和元素这一事实很容易被恶意用户用来操纵和显示其他 HTML 元素标签中不需要的或有害的元素。跨站点脚本还可能导致敏感信息丢失、泄露和更改。