在 JavaScript 中获取父父级的 innerHTML

Question

I have this code:

   <div class="places-item">
      <div class="places-item-img"></div>
      <div class="places-item-header">
         <h2>TEST</h2>
         <div class="places-item-header-add">ADD</div>
      </div>
   </div>

   document.querySelector('.places-item-header-add').addEventListener('click',function(){
      var getHTML = this.outerHTML;
      document.querySelector('body').innerHTML = getHTML
   });

The current code only displays div.places-item-header-add, and I want the entire div.places-item to be displayed. Is that possible?

Answer 1

I think this is what you are asking for:

document.querySelector('.places-item-header-add').addEventListener('click',function(){
    document.querySelector('body').innerHTML = this.parentElement.parentElement.outerHTML;
});