Javascript 是否有一种简洁的方法来更改同一函数中多个div的innerHTML？

单击按钮时，我正在使用innerHTML替换几个div的内容

我目前有一个新的视频源加载时，一个按钮被点击，但也希望包括改变其他div在同一按钮点击其他类型的内容

首先，我不确定一个接一个地编写这些函数（就像在我包含的代码片段中那样）是否能正确地执行这三个函数；其次，我希望它们都能以某种方式在同一个函数中得到支持，以简化编码

我四处寻找在一个函数中更改多个HTML元素的方法，但我能找到的最内部的HTML信息似乎只针对一个元素的更改

//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';
})

//我目前有：
$（“#狗视频”）。在（'click'，function（）上{
document.getElementById（“视频内容”）.innerHTML=''；
视频内容。加载（）；
})
//但我也想同时做这两件事
$（'dogvideo'）。在（'click'，function（）上{
document.getElementById（“h2内容”）.innerHTML='Dog Video Heading'；
})
$（'dogvideo'）。在（'click'，function（）上{
document.getElementById（“p-content”）.innerHTML='这是狗文本'；
})

将所有三个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();
});

$（“#狗视频”）。在（'click'，function（）上{
$（“#视频内容”）.html（“”）；
$（'#h2 content'）.html（'Dog Video Heading'）；
$（'#p-content'）.html（'这是狗文本'）；
$（“#视频内容”）.load（）；
});

将所有三个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();
});

$（“#狗视频”）。在（'click'，function（）上{
$（“#视频内容”）.html（“”）；
$（'#h2 content'）.html（'Dog Video Heading'）；
$（'#p-content'）.html（'这是狗文本'）；
$（“#视频内容”）.load（）；
});

Awesome:）我确信有一种方法，但无法确定它应该是如何构造的