Check if html tag contains text node – Shopify

I have a popup modal in Shopify, I’m using text node instead of innerHtml for security concerns. However, everytime I open the popup modal, the text node keeps getting appended to my h1 tag. Is there any way to check if the node already has been appended? (I don’t want to use a boolean value to check if text node has been appended)

html:

<h1 id="ProductHeading" class="product__title product__title--template"></h1>
<h2 id="ProductHeadingModal" class="product__title product__title--template product__title--modal"></h2>

javascript:

var title = document.createTextNode(product.title);
// Product heading is an element with h1 tag
var productHeading = document.getElementById("ProductHeading"); 

if(// how to check if element has no node?) {
  productHeading.appendChild(title);
}

the entire javascript block:

window.onload = () => {
  if (window.__shgProductInits.length) {
    window.__shgProductInits.forEach((ele) => {
      let proId = document.getElementById(ele.uuid);
      proId.setAttribute('url', ele.productHandle);
      proId.style.cursor='pointer';
      proId.addEventListener('click', (e) => {
        let productHandle = e.target.parentElement.parentElement.parentElement.getAttribute('url');
        fetch('/products/'+productHandle+'.js')
          .then((res) =>{return res.json()})
          .then((product) => { 
            console.log(product)
            var product = product;
            document.getElementsByClassName("product-modal")[0].style.display = "block";
            
            var title = document.createTextNode(product.title);
            var productHeading = document.getElementById("ProductHeading");
            var productHeadingModal = document.getElementById("ProductHeadingModal");
            
            if(!(productHeading.hasChildNodes())) {
                productHeading.appendChild(title);
                productHeadingModal.appendChild(title);
                
                var price = document.createTextNode("$" + parseInt(product.price).toFixed(2));
                document.getElementById("product-price").appendChild(price);
            }
            document.getElementById("product-image").src = product.images[0];
          });
      });
    });
  }

ProductHeading itself is not a node (I think). And checking innerHtml for length doesn’t work as it is always 0

Update:

I’ve added the conditional check, it still returns false everytime I open the modal.

My code:

My browser console:

My website displays:

Inspect element in browser: