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

Question

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

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);

}

整个 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);

            }

          });

      });

    });

  }

ProductHeading 本身不是一个节点（我认为）。检查innerHtml的长度不起作用，因为它总是0

Answer 1

有几种方法：if (element.firstChild) {    // It has at least one}或hasChildNodes()函数：if (element.hasChildNodes()) {    // It has at least one}或childNodes 的length 属性：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 tagvar productHeading = document.getElementById("ProductHeading"); if(!(productHeading.hasChildNodes())) {  productHeading.appendChild(title);}

Answer 2

if&nbsp;(productHeading.hasChildNodes())&nbsp;{ }