Чтобы создать панель навигации в 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>
`;