Создание навигационной панели в JavaScript: создание динамических элементов, литералы шаблонов, манипуляции с InnerHTML

Чтобы создать панель навигации в JavaScript, у вас есть несколько способов. Вот несколько часто используемых подходов:

Метод 1: динамическое создание элементов панели навигации
Вы можете создать панель навигации, динамически генерируя элементы HTML с помощью JavaScript и добавляя их в нужное место в документе HTML. Вот пример:

HTML:

<div id="navbar"></div>

JavaScript:

const navbar = document.getElementById('navbar');
// Create navbar elements
const homeLink = document.createElement('a');
homeLink.href = '#';
homeLink.textContent = 'Home';
const aboutLink = document.createElement('a');
aboutLink.href = '#about';
aboutLink.textContent = 'About';
const contactLink = document.createElement('a');
contactLink.href = '#contact';
contactLink.textContent = 'Contact';
// Append elements to navbar
navbar.appendChild(homeLink);
navbar.appendChild(aboutLink);
navbar.appendChild(contactLink);

Метод 2: использование литералов шаблона
Другой метод — использовать литералы шаблона для создания HTML-разметки для панели навигации. Вот пример:

HTML:

<div id="navbar"></div>

JavaScript:

const navbar = document.getElementById('navbar');
// Define navbar HTML
const navbarHTML = `
  <a href="#">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
`;
// Set navbar HTML
navbar.innerHTML = navbarHTML;

Метод 3: управление InnerHTML
Вы также можете создать панель навигации, манипулируя свойством innerHTMLсуществующего элемента HTML. Вот пример:

HTML:

<div id="navbar"></div>

JavaScript:

const navbar = document.getElementById('navbar');
// Set navbar HTML
navbar.innerHTML = `
  <a href="#">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
`;