Как через JavaScript или jQuery поменять текст в элементе HTML?

Question

Создаю небольшое веб-приложение, в котором есть заголовок, по нажатию на который выпадает список из нескольких городов России. Я хочу, чтобы по нажатию на один из них (допустим, на Казань) заголовок менялся на название этого города. Вопрос: что написать, чтобы текст элемента с индексом "head" менялся на текст элемента, на который кликает пользователь?

Answer 1

Есть такое вот интересное очень простое решение на jQuery - менять название города + иконку (например, герб)

//Показываем список городов
$('#city').on('click', function() {
  $('.list').show();
});

//Скрываем список городов
$('.list').on('click', function() {
  $(this).hide();
});

//Выбираем город из списка
$('ul').on('click', 'li', function() {
  let data = $(this).data();
  $('#city').find('img').attr('src', data.gerb).end().find('span').text(data.city);
});

.list {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="city">
  <img src="/img/flag-m.png" />
  <span>Севастополь</span>
</div>

<ul class="list">
  <li data-city="Севастополь" data-gerb="/img/flag.png">Севастополь</li>
  <li data-city="Казань" data-gerb="/img/flag.png">Казань</li>
  <li data-city="Москва" data-gerb="/img/flag.png">Москва</li>
  <li data-city="Екатеринбург" data-gerb="/img/flag.png">Екатеринбург</li>
</ul>

Answer 2

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

let citySelected = document.querySelector('#citySelected');
let citiesList = document.querySelector('#citiesList');
let cities = citiesList.querySelectorAll('li');

// Кликом по "активному городу", открываем список городов, или закрываем, если открыт
citySelected.addEventListener('click', (ev) => {
    citiesList.classList.toggle('show');
});

// Выбираем город из списка и заменяем им "активный город"
for (const city of cities) {
    city.addEventListener('click', (ev) => {
        
        // меняем герб у "активного" города
        citySelected.querySelector('img').src = ev.target.dataset.flag;
        
        // меняем текст-название "активного города"
        citySelected.querySelector('span').textContent = ev.target.dataset.city;

        // закрываем список после того, как выбрали город
        citiesList.classList.toggle('show');
    });
}

#citySelected{
    display: flex;
    align-items: center;
}

.hide {
    display: none;
}
.show {
    display: block;
}

<div>
    <div id="citySelected">
        <img style="width: 40px;"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/COA_of_Sevastopol.svg/400px-COA_of_Sevastopol.svg.png" />
        <span>Севастополь</span>
    </div>
    <ul id="citiesList" class="hide">
    
        <li data-city="Севастополь"
            data-flag="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/COA_of_Sevastopol.svg/400px-COA_of_Sevastopol.svg.png">
            Севастополь</li>
            
        <li data-city="Казань"
            data-flag="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Coat_of_Arms_of_Kazan_%28Tatarstan%29.svg/240px-Coat_of_Arms_of_Kazan_%28Tatarstan%29.svg.png">
            Казань</li>
            
        <li data-city="Москва"
            data-flag="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Coat_of_Arms_of_Moscow.svg/400px-Coat_of_Arms_of_Moscow.svg.png">
            Москва</li>
            
        <li data-city="Екатеринбург"
            data-flag="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Coat_of_Arms_of_Yekaterinburg_%28Sverdlovsk_oblast%29.svg/400px-Coat_of_Arms_of_Yekaterinburg_%28Sverdlovsk_oblast%29.svg.png">
            Екатеринбург</li>
            
    </ul>
</div>

БЛОГ НА HUSL

Как через JavaScript или jQuery поменять текст в элементе HTML?

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