如何将URL链接添加到顶部导航栏

<nav class="top-nav">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <!-- 添加新的URL链接 -->
    <li><a href="https://example.com/new-page">新页面</a></li>
  </ul>
</nav>

.top-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.top-nav li {
  float: left;
}

.top-nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.top-nav li a:hover {
  background-color: #111;
}

// 假设你想在页面加载后添加一个新的链接
window.onload = function() {
  var navList = document.querySelector('.top-nav ul');
  var newLink = document.createElement('li');
  newLink.innerHTML = '<a href="https://example.com/new-page">新页面</a>';
  navList.appendChild(newLink);
};