如何使用JS结合hasClass条件判断，根据其他div内容输出对应文本

你需要的逻辑核心是先通过类名+文本内容做双重校验，匹配成功后动态插入对应提示节点，具体实现如下：

实现逻辑拆解 #

• 封装类名判断方法：原生JS没有内置hasClass方法，可以基于classList或者正则实现类名校验，jQuery等库自带该方法可直接调用
• 遍历目标div节点：筛选出携带指定类名、且文本内容为New York的元素
• 动态插入节点：校验通过后，创建内容为Free Delivery的div，插入到页面指定位置

代码示例 #

原生JS无依赖版本 #

// 封装hasClass判断方法，兼容新旧浏览器
function hasClass(element, targetClass) {
  return element.classList ? 
    element.classList.contains(targetClass) : 
    new RegExp('(^|\\s)' + targetClass + '(\\s|$)').test(element.className);
}

// 配置项，可根据实际业务修改
const TARGET_CLASS = 'city'; // 替换为你需要校验的实际类名
const TARGET_TEXT = 'New York';
const TIP_CONTENT = 'Free Delivery';

let matchResult = false;
// 遍历所有div做校验
document.querySelectorAll('div').forEach(div => {
  // 同时满足类名匹配、文本匹配（trim去掉首尾空白避免格式问题）
  if (hasClass(div, TARGET_CLASS) && div.textContent.trim() === TARGET_TEXT) {
    matchResult = true;
  }
})

// 匹配成功则插入提示节点
if (matchResult) {
  const tipNode = document.createElement('div');
  tipNode.textContent = TIP_CONTENT;
  // 可修改挂载位置，示例为插入到body末尾
  document.body.appendChild(tipNode);
}

jQuery版本（可直接调用内置hasClass） #

如果项目中已经引入jQuery，可以简化代码：

const isMatch = $('div.city').filter(function() {
  return $(this).text().trim() === 'New York';
}).length > 0;

if (isMatch) {
  // 插入到对应位置即可
  $('body').append('<div>Free Delivery</div>');
}

适配说明 #

• 如果不需要校验类名，仅判断页面是否存在内容为New York的div，直接删除代码中hasClass相关的判断条件即可
• 如果需要把提示插入到匹配到的城市div后面，可以在遍历到匹配元素时，直接调用div.after(tipNode)插入，不需要全局遍历后再统一挂载
• 文本判断时加trim()是为了避免div中存在换行、缩进、多余空格导致匹配失败

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