如何使用JavaScript向WordPress站点的空div中插入文本？

错误分析 #

你之前的代码存在几个关键问题：

• 选择器错误：jQuery选择器中多类名应该用.连接（如.pt-cv-taxoterm.below_title），空格是后代选择器，会匹配错误元素；原生getElementsByClassName不需要加标签前缀（如div.），且该方法返回元素集合，不能直接设置innerHTML。
• 混用JS库：同时使用jQuery的:empty筛选和原生DOM方法，逻辑混乱。
• 未处理元素集合：getElementsByClassName返回多个元素的集合，必须遍历每个元素才能修改内容。

正确代码（推荐jQuery方案，WordPress默认自带） #

直接在插件的自定义JS区域添加这段代码：

jQuery(document).ready(function($) {
  // 自动筛选所有符合条件的空div，插入指定链接
  $('.pt-cv-taxoterm.below_title:empty').html('<a href="https://revtommy.com/sermons/" title="Sermons" class="pt-cv-tax-blog">Sermons</a>');
});

说明： #

• jQuery(document).ready()确保DOM加载完成后执行代码，避免找不到元素的问题。
• .pt-cv-taxoterm.below_title:empty精准选中同时拥有两个类名且为空的div。
• html()方法自动遍历所有匹配元素，批量插入内容。

原生JS方案（无需依赖jQuery） #

如果不想用jQuery，可使用这段原生代码：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有符合条件的空div
  const targetDivs = document.querySelectorAll('div.pt-cv-taxoterm.below_title:empty');
  
  // 遍历每个div，创建并插入链接
  targetDivs.forEach(div => {
    const link = document.createElement('a');
    link.href = 'https://revtommy.com/sermons/';
    link.title = 'Sermons';
    link.className = 'pt-cv-tax-blog';
    link.textContent = 'Sermons';
    div.appendChild(link);
  });
});

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