Изменение содержимого div через radio-кнопки в JavaScript

Быстрый ответ

Если вам необходимо быстро заменить текст в элементе div с использованием JavaScript, воспользуйтесь следующим кодом:

document.getElementById('targetDiv').textContent = 'Обновлённый текст';

Для вставки HTML кода, используйте следующую запись:

document.getElementById('targetDiv').innerHTML = '<b>Обновлённое</b> содержимое';

textContent идеально подходит для работы с простым текстом, в том время, как innerHTML даёт возможность вставки HTML-тегов. Обратите внимание: большая мощь накладывает большую ответственность, особенно при работе с HTML-кодом.

Динамическое изменение содержимого

Иногда содержимое должно изменяться в зависимости от действий пользователя. Вот как обновить содержимое div в соответствии с выбором пользователя, сделанным с помощью радиокнопок:

// Функция обновления содержимого
function updateContent(value) {
  document.getElementById('targetDiv').innerHTML = value;
}

// Обработчик события, который отслеживает выбор пользователя
document.getElementById('myRadioButton').addEventListener('change', function() {
  updateContent(this.value);  // Сила этого метода больша и сильна
});

Не забудьте объединить радиокнопки, присвоив им одинаковый атрибут name.

Делегирование — незамеченный герой

Когда радиокнопок множество, делегирование событий становится настоящей находкой:

// Обработчик событий на родительском элементе
document.querySelector('#radioContainer').addEventListener('change', function(event) {  
  if(event.target.type === 'radio') {
    updateContent(event.target.value);  // Обновляем содержимое, учитывая выбор пользователя
  }
});

Такой подход к делегированию позволяет избежать необходимости устанавливать обработчики на каждую кнопку в отдельности.

querySelector выручает

Для тех, кто ценит универсальность, бывает полезен querySelector:

document.querySelector('.targetClass').innerHTML = 'Новое содержимое';

querySelector поддерживает CSS-селекторы, с его помощью вы получаете невероятную гибкость при использовании.

Визуализация

Представим, что мы управляем цифровым рекламным баннером:

Перед использованием JavaScript: 
💻👀 «Специальное предложение дня: яблочный пирог»

С использованием JavaScript:
document.getElementById('billboard').innerHTML = "Горячее предложение: два по цене одного!";

После применения JavaScript: 
💻👀 «Горячее предложение: два по цене одного!»

Так же просто, как меняется содержимое на рекламном щите, JavaScript позволяет обновить содержимое div.

jQuery — роскошный родственник

Если вы хотите внести нотку элегантности, вам пригодится jQuery:

$('#targetDiv').html('Новое <i>HTML</i> содержимое');  // Время внести особую изысканность!

Метод .html() в jQuery — это аналог функции innerHTML.

Тестируйте как будто завтра не наступит

Тестирование кода должно быть неотъемлемой частью вашей работы. В этом процессе вам необходимо ясно понимать разницу между div и span. Используйте различные инструменты для тестирования производительности и оптимизации кода, сайт jsperf.com должен стать вашим непрерывным рабочим инструментом.

Кроме того, помните, что JavaScript может вести себя по-разному в разных браузерах, поэтому тестируйте всё!

Доступность — Не все герои носят плащи

Соблюдение принципов доступности важно. Герои бывают разные: не все из них носят плащи, некоторые пользуются скринридерами. Берегите доступность контента, добавляйте необходимые атрибуты ARIA, чтобы пользователи могли взаимодействовать со всем содержимым.