如何用PHP/JavaScript为div添加类名？请修正我的代码错误

需求 #

把下面HTML结构中，父容器col-md-3 col-xs-6 cegg-gridbox下的<div class="producttitle"></div>，修改为<div class="producttitle h3"></div>：

<div class="col-md-3 col-xs-6 cegg-gridbox">
  <div class="cegg-thumb"></div>
  <div class="producttitle"><div class="cegg-mb10"></div></div>
  <div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>

你写的代码问题 #

你尝试的代码有两个明显错误：

• 选择器错误：document.querySelector('producttitle')是找标签名为producttitle的元素，而你要选的是类名为producttitle的div，类选择器必须加.，正确写法是.producttitle
• classList.replace用法错了：这个方法是替换单个类名，不能直接传带空格的多个类。你的需求是保留producttitle，新增h3类，根本不需要用replace。

正确代码 #

// 精准选中目标div（用父容器类限定范围，避免选到其他同class的元素）
const targetDiv = document.querySelector('.col-md-3.col-xs-6.cegg-gridbox .producttitle');
// 直接新增h3类，原类会保留
targetDiv.classList.add('h3');

// 验证结果
console.log(targetDiv.classList.value); // 输出：producttitle h3

如果页面只有这一个producttitle元素，也可以简化成：

document.querySelector('.producttitle').classList.add('h3');

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