I'm using the following script to get the ancestor of an element

<form id="form1">
  <div id="div1">
    <label id="label1">some label</label>
  </div>
  <div>
    <button id="btn1">
      Submit
    </button>
  </div>
</form>

this script works fine, as in it returns the form element

const btn = document.querySelector('#btn1');
console.log(btn);
const form = btn.closest('form');
console.log('form', form); // this returns the <form> element

but when I added some script to append an element using innerHTML, the form variable contains null.

const iconLoading = '<i class="fa-solid fa-spinner fa-spin"></i>';
const btn = document.querySelector('#btn1');
console.log(btn);
const parent = btn.parentElement;
parent.innerHTML += iconLoading;
const form = btn.closest('form');
console.log('form', form); // this returns null

here's the jsfiddle. what am I doing wrong? any help is appreciated

const iconLoading = '<i class="fa-solid fa-spinner fa-spin"></i>';
const btn = document.querySelector('#btn1');
console.log(btn);
const parent = btn.parentElement;
parent.innerHTML += iconLoading;
const form = btn.closest('form');
console.log('form', form);

<form id="form1">
  <div id="asd1">
    <label id="label1">some label</label>
  </div>
  <div>
    <button id="btn1">
      Submit
    </button>
  </div>
</form>