如何用JavaScript为指定条件的<a>标签文本包裹带hide类的<span>

原HTML代码 #

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

目标效果 #

将符合条件的<a>标签文本用<span class="hide">包裹，最终HTML如下：

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

JavaScript实现方案 #

// 精准筛选符合条件的a标签：位于.team-grid容器内，且直接父元素是.t-entry-category的span
const targetLinks = document.querySelectorAll('.team-grid .t-entry-category > a');

// 遍历处理每个目标链接
targetLinks.forEach(link => {
    // 提取链接的文本内容
    const linkText = link.textContent.trim();
    // 清空链接原有内容
    link.innerHTML = '';
    // 创建带hide类的span元素
    const hideSpan = document.createElement('span');
    hideSpan.className = 'hide';
    hideSpan.textContent = linkText;
    // 将span插入到链接中
    link.appendChild(hideSpan);
});

代码说明 #

• 用document.querySelectorAll('.team-grid .t-entry-category > a')直接定位满足双条件的链接：
  • .team-grid限定链接必须在目标祖先容器内
  • .t-entry-category > a确保链接的直接父元素是指定类名的span
• 遍历过程中，先保存链接文本，清空原有内容后创建新的span元素，完成文本包裹操作。

内容的提问来源于stack exchange，提问作者user28293600