Javascript 检查html标记是否包含文本节点

我在Shopify中有一个弹出模式，出于安全考虑，我使用文本节点而不是innerHtml。但是，每次我打开弹出模式时，文本节点总是附加到我的h1标记上。有没有办法检查节点是否已附加？（我不想使用布尔值来检查是否追加了文本节点）

html:

整个javascript块：

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本身不是一个节点（我认为）。检查innerHtml的长度不起作用，因为它总是0

更新：

我添加了条件检查，每次打开模式时它仍然返回false

我的代码：

我的浏览器控制台：

我的网站显示：

检查浏览器中的元素：

---

有两种方法：

if (element.firstChild) {
    // It has at least one
}

或

hasChildNodes（）

函数：

if (element.hasChildNodes()) {
    // It has at least one
}

或子节点的长度属性：

if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
    // It has at least one
}

所以你可以写这个

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

if(!(productHeading.hasChildNodes())) {
  productHeading.appendChild(title);
}

---

参考答案

hi Alex谢谢你的及时回答，我已经更新了我的问题-hasChildNodes似乎不起作用，如果你在你的条件中添加括号，

if（！（productHeading.hasChildNodes（））

？是的，我已经更新到（！（productHeading.hasChildNodes（））我想是因为在你的截图中大括号不见了。好吧，我会看一看，我看它行了吗？我试着附加它两次，但它只会附加一次，因为在第一次插入后，它有childnodes请发布一个html以及js，这样可以提供一个有效的e例如，因为下面的任何答案都应该适用于您。我已经用html和javascript进行了更新。我正在Shopify幕府的liquid平台上使用脚本标记（liquid是一种类似html的模板语言）

if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
    // It has at least one
}

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

if(!(productHeading.hasChildNodes())) {
  productHeading.appendChild(title);
}

if (productHeading.hasChildNodes()) {

}