javascript - 有没有一种简洁的方法可以在同一函数中更改多个 div 的innerHTML？

Question

当单击按钮时，我将使用innerHTML 替换多个div 的内容。

我目前在单击按钮时加载了一个新的视频源，但还希望在同一按钮单击时更改其他 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();
});