使用JavaScript或jQuery在指定span中添加class为dub的div元素

嘿，这事儿好办！我给你准备了原生JavaScript和jQuery两种实现方案，看你项目用哪个顺手：

原HTML结构 #

<div class="status"> 
  <span class="bar"></span> 
  <div class="ep">Ep 12</div> 
</div>

目标效果（执行后HTML结构） #

<div class="status"> 
  <span class="bar">
    <div class="dub">Dub 12</div>
  </span> 
  <div class="ep">Ep 12</div> 
</div>

// 找到class为"bar"的span元素
const barSpan = document.querySelector('.bar');

// 创建新的div元素
const dubDiv = document.createElement('div');
// 给div添加"dub"类名
dubDiv.classList.add('dub');
// 设置div的文本内容（可根据需求修改）
dubDiv.textContent = 'Dub 12';

// 将新创建的div插入到.bar内部
barSpan.appendChild(dubDiv);

解释： 这段代码通过原生DOM API一步步完成元素创建、属性设置和插入，不需要依赖任何库，兼容性拉满。

如果你项目里已经引入了jQuery，用这个写法更简洁：

// 直接在.bar元素末尾追加目标div
$('.bar').append('<div class="dub">Dub 12</div>');

解释： jQuery的append()方法可以直接把HTML字符串插入到目标元素内部的最后位置，一行代码搞定，非常省心。

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