使用 Javascript .outerHTML 调整 html 元素标签

问：

<script>
// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
        
const myElement06 = document.getElementById("block-3_17");
if (myElement06) {
     // Find the child div with class "summary-thumbnail-event-date" inside the parent div
  const myChildDiv06 = myElement06.querySelector('.summary-event-date');
  if (myChildDiv06) {
     // Create a new div with the desired HTML structure
     const newMyChildDiv06 = document.createElement('div');
     newMyChildDiv06.className = 'summary-event-date';
     newMyChildDiv06.style.visibility = 'hidden'; // Sets style to hidden.
     // Replace the existing ChildDiv with the newChildDiv
     myChildDiv06.outerHTML = newMyChildDiv06.outerHTML;
  } else {
     console.error('Child div not found');
  }
}
});
</script>

我认为这应该有效，但事实并非如此。我想在加载的 DOM 文档上隐藏一个元素。我必须以特定的 ID 为目标，因为有许多标签使用“.summary-event-date”类。我以为.outerHTML方法可以解决问题。不是吗？