Есть ли краткий способ изменить innerHTML нескольких div внутри одной функции?

Question

Я заменяю содержимое нескольких элементов div с использованием innerHTML при нажатии кнопки.

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

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

Я искал возможность изменения нескольких элементов HTML в одной функции, но большая часть информации innerHTML, которую я смог найти, кажется, касается только одного изменения элемента.

//I currently have this:
$('#dog-video').on('click', function() {
  document.getElementById("video-content").innerHTML = '<source src= "dogvideo.mp4" type="video/mp4">';
video-content.load();
})

// But would also like to do both of these simultaneously
$('#dogvideo').on('click', function() {
  document.getElementById("h2-content").innerHTML = 'Dog Video Heading';
})

$('#dogvideo').on('click', function() {
  document.getElementById("p-content").innerHTML = 'This is dog text';
})

Answer 1

Нет ничего плохого в том, чтобы поместить все три обновления DOM в одно тело функции или использовать jquery внутри этой функции.

$('#dog-video').on('click', function() {
  $('#video-content').html('<source src= "dogvideo.mp4" type="video/mp4">');
  $('#h2-content').html('Dog Video Heading');
  $('#p-content').html('This is dog text');
  $('#video-content').load();
});