JavaScript DIV 编辑破坏了其他元素的功能

Question

所以我的网站是使用一家名为 Inksoft 的公司软件构建的，这让我几乎不需要进行定制工作。所以我必须采取很多解决方法。

Here is my site's homepage.

页面顶部的标题目前只有两个链接。 “产品”和“设计工作室”。我的目标是在标题中添加“关于我们”链接和“买家指南”。

我无法使用 Inksoft 的后端向标题添加新内容。因此，我编写了一个解决方法来替换 header 中现有 DIV 的内容，并链接到我希望它们去的位置。

唯一的问题是，当实现此功能时，响应式移动导航会失去功能。 As seen here on this test page.

测试页面的顶部标题中有“关于我们”，是使用以下代码添加的:

<script>
  $("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><a href="/LiveCustom/Stores/Page/1000023/About_Us"><font color="#000000">About Us</font></a></li>');
</script>

因此，简化的问题是:如何在不丢失导航栏响应功能的情况下实现此代码？

Answer 1

jQuery .html函数将替换目标元素内的 HTML。如果您只想附加一个值，您可能需要 .append到元素。

此外，您没有将 HTML 设置为有效的 html 字符串。您可能只是想摆脱 <document.write="在字符串的开头。粗略地看一下，其余部分看起来都不错。

所以:

<script>
  $("#header-nav-designs").append('<li id="header-nav-studio"><a href="/LiveCustom/Stores/Page/1000023/About_Us"><font color="#000000">About Us</font></a></li>');
</script>

编辑:

再仔细观察一下，看起来好像 $('#header-nav-designs')您选择的已经是 <li>这意味着您需要选择父项 <ul>列表或者您可以使用 jquery .after函数代替。

<script>
  $("#header-nav-designs").after('<li id="header-nav-studio"><a href="/LiveCustom/Stores/Page/1000023/About_Us"><font color="#000000">About Us</font></a></li>');
</script>

正如上面其他人评论的那样，您在页面上遇到错误。看起来好像您正在尝试获取 id divID 的元素并向其附加一些 html，但没有 id 为 divID 的元素因此您收到一条错误消息，指出您无法读取属性 innerHTML of null调用document.getElementById返回 null(未找到元素)。