Как вы делаете обновляемый NavBar?

Question

Я сделал Navbar для своего сайта, но я хотел бы иметь возможность обновить их все на своем сайте, отредактировав некоторый код в JS. Пожалуйста, обратите внимание, что я очень плох в JS, и я признаю, что это может быть невозможно с JavaScript. Вот код для HTML.

nav {
  list-style-type: none;
  background-color: lightblue;
  border: 1px solid black;
  width: fit-content;
  height: min-content;
  position: fixed;
}

nav li {
  float: left;
}

nav img {
  height: 47px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

nav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: -apple-system;
  background-color: lightblue;
}

nav li a:hover {
  background-color: blue;
  color: white;
}

nav .nohover:hover {
  color: white;
}

<nav class="container">
  <li><img src="image" class="navimg"></li>
  <li><a href="website1">website1</a></li>
  <li><a href="webite2">website2</a></li>
  <li><a href="website3">website3</a></li>
</nav>

Информация будет очень полезной. Если вы знаете, как это сделать, скажите, пожалуйста.

Answer 1

Мне не очень понятно, что вы хотите, но если вы хотите изменить ссылку, вы можете использовать это. Я также дал тегам a класс, чтобы я мог вызывать их с кодом JQuery!

РЕДАКТИРОВАТЬ: Мы - сообщество, которое помогает вам решать ваши проблемы с кодированием, а не писать весь код для вас. Поэтому имейте это в виду для следующего вопроса о StackOverflow.

РЕДАКТИРОВАТЬ 2: Я сохранил код css, поскольку он не имеет значения.

$(document).ready(function() {
    $('.link1').parent().html('<a class="link1" href="changed1">changed1</a>');
    $('.link2').parent().html('<a class="link2" href="changed2">changed2</a>');
    $('.link3').parent().html('<a class="link3" href="changed3">changed3</a>');
    // if you want to add a new item to the end
    $('li:last').append('<li><a class="link4" href="changed4">changed4</a></li>')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="container">
      <li><img  src="image" class="navimg"></li>
      <li><a class="link1" href="website1">website1</a></li>
      <li><a class="link2" href="webite2">website2</a></li>
      <li><a class="link3" href="website3">website3</a></li>
</nav>

Answer 2

Удалите деталь HTML и добавьте следующий код в ваш файл js. Все, что вам нужно сделать, это отредактировать массив меню. Просто заполните столько, сколько хотите.

var menuArray = ['website1', 'website2', 'website3']

var navdiv = document.createElement("div");
navdiv.setAttribute('class', 'container')
var ul = document.createElement("ul");
menuArray.forEach((ele) => {
  var li = document.createElement("li");
  li.innerHTML = ele
  ul.appendChild(li)
})
navdiv.appendChild(ul)
document.body.prepend(navdiv);