Check if html tag contains text node

Question

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:

Please post an html so along with the js so could provide a working example. becouse any of the answer below should have worked for you. — Alen.Toma
– Alen.Toma, Commented Dec 18, 2020 at 10:09
I've updated with the html and javascript. I'm using script tags on a liquid platform in Shopify Shogun (liquid is a templating language like html) — iBlehhz
– iBlehhz, Commented Dec 18, 2020 at 10:15

Aalexander · Accepted Answer · 2020-12-18 09:55:01Z

1

A couple of ways:

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

or the hasChildNodes() function:

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

or the length property of childNodes:

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

So you can just write this

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

Referring this answer

edited Dec 18, 2020 at 9:55

answered Dec 18, 2020 at 9:49

Aalexander

4,9843 gold badges13 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

iBlehhz Over a year ago

hi Alex thanks for the prompt answer, I've updated my issue - hasChildNodes doesn't seem to work

Aalexander Over a year ago

And if you add the braces inside your condition if(!(productHeading.hasChildNodes()) ?

iBlehhz Over a year ago

yea I've updated to (!(productHeading.hasChildNodes())) still appears to keep appending

Aalexander Over a year ago

Okay I thought because in your screenshoots the braces were missing. Okay I will take a look at it

Aalexander Over a year ago

For me it works, did I miss something here? jsfiddle.net/2mxd4wjb/#&togetherjs=lC1IpBTMx0 I try to append it twice but it will only do it once because after the first insertion it has childnodes

|

Ezrab_ · Accepted Answer · 2020-12-18 09:50:21Z

1

if (productHeading.hasChildNodes()) { }

answered Dec 18, 2020 at 9:50

Ezrab_

1,0237 gold badges22 silver badges49 bronze badges

Collectives™ on Stack Overflow

Check if html tag contains text node

2 Answers 2

11 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Linked

Related