Using JavaScript how do I enclose the text of an <a> tag with a <span> if a parent <div> has a certain class

Question

I have the following code

<div class="team-grid">
    <div class="cssgrid-wrapper">
        <div class="cssgrid-container">
            <div class="tmb"> 
                <div class="t-inside "> 
                    <div class="t-entry-text">
                        <div class="t-entry-text-tc"> 
                            <div class="t-entry"> 
                                <p class="t-entry-meta"> 
                                    <span class="t-entry-category t-entry-tax"> 
                                        <a href="#">Category one</a>
                                    </span> 
                                </p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
        <div class="tmb"> 
            <div class="t-inside "> 
                <div class="t-entry-text">
                    <div class="t-entry-text-tc"> 
                        <div class="t-entry"> 
                            <p class="t-entry-meta"> 
                                <span class="t-entry-category t-entry-tax"> 
                                    <a href="#">Category two</a>
                                </span> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </div>
</div>

and I'd like to use javascript to enclose every A tag's text with SPAN that has the class 'hide' if the a tag has a grandparent DIV with the class 'team-grid' and parent SPAN with the class 't-entry-category'.

So in the above example the result would be

<div class="team-grid">
    <div class="cssgrid-wrapper">
        <div class="cssgrid-container">
            <div class="tmb"> 
                <div class="t-inside "> 
                    <div class="t-entry-text">
                        <div class="t-entry-text-tc"> 
                            <div class="t-entry"> 
                                <p class="t-entry-meta"> 
                                    <span class="t-entry-category t-entry-tax"> 
                                        <a href="#"><span class="hide">Category one</span></a>
                                    </span> 
                                </p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
        <div class="tmb"> 
            <div class="t-inside "> 
                <div class="t-entry-text">
                    <div class="t-entry-text-tc"> 
                        <div class="t-entry"> 
                            <p class="t-entry-meta"> 
                                <span class="t-entry-category t-entry-tax"> 
                                    <a href="#"><span class="hide">Category two</span></a>
                                </span> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </div>
</div>

any help would be appreciated.

Answer 1

document.querySelectorAll('.team-grid .t-entry-category > a').forEach(a => {
    a.innerHTML = `<span class="hide">${a.textContent}</span>`;
});