检查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 tagvar 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 tag

var productHeading = document.getElementById("ProductHeading"); 

if(!(productHeading.hasChildNodes())) {

  productHeading.appendChild(title);

}

Answer 2

if (productHeading.hasChildNodes()) {

}