Как в бургер меню с помощью js поменять и добавить текст в HTML?

Question

На декстопной версии у меня вот такое меню (первый скриншот), а уже в адаптиве, при появлении бургер-меню у меня это же меню, только слегка видоизмененное. Как мне поменять изначальный текст, а также добавить его с помощью JS?

const hamb = document.querySelector("#hamb");
const popup = document.querySelector("#popup");
const menu = document.querySelector("#menu").cloneNode(1);

hamb.addEventListener("click", hambHandler);

function hambHandler(e) {
    e.preventDefault();
    popup.classList.toggle("open");
    renderPopup();
}

function renderPopup() {
    popup.appendChild(menu);
}

<div class="top">
        <nav class="navbar">
            <div class="container">
                <div class="navbar__wrap">
                    <div class="hamb">
                        <div class="hamb__field" id="hamb">
                            <span class="bar"></span>
                            <span class="bar"></span>
                            <span class="bar"></span>
                        </div>
                    </div>
                    <img class="logo" id="logo" src="img/logo.svg" alt="">
                    <ul class="menu" id="menu">
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">о приюте</p>
                            </a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">питомцы</p>
                            </a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">полезные советы</p>
                            </a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">контакты</p>
                            </a></li>
                    </ul>
                    <ul class="menu-media menu">
                        <li><img src="img/Instagram.svg" alt="instagram"></li>
                        <li><img src="img/vk.svg" alt="vk"></li>
                        <li><img src="img/telegram.svg" alt="telegram"></li>
                    </ul class="menu-media">
                </div>
            </div>
        </nav>
        <div class="popup" id="popup"></div>
    </div>

Answer 1

Чтобы просто изменить текст в элементе тебе хорошо подойдёт innerText:

element.innerText = 'текст';

Чтобы изменить содержимое элемента, включая замену тега, тебе поможет innerHTML:

element.innerHTML = 'содержимое, которое будет отображаться';

Важно помнить, что ковычки здесь играют очень большую роль. Если у тебя в одинарных ковычках будут одинарные - консоль выдаст ошибку, так же и наоборот с двойными.

БЛОГ НА HUSL

Как в бургер меню с помощью js поменять и добавить текст в HTML?

Ответы (1 шт):