如何使用jQuery向含‘card b’标题的card-body插入HTML？

核心思路 #

先定位到文本为card b的card-header元素，再找到它对应的同级card-body，最后用jQuery的插入方法添加内容。

方法1：快速匹配（适合无多余空格的场景） #

如果card-header里的文本就是干净的card b，直接用:contains()选择器定位，再通过.next()找到相邻的card-body：

// 定义要插入的HTML内容
const insertHtml = '<p>这是给card b的专属内容</p><div class="alert alert-success">插入成功！</div>';

// 执行插入操作（用html()会替换原有内容）
$('.card-header:contains("card b")').next('.card-body').html(insertHtml);

方法2：精准匹配（处理文本含空格/换行的情况） #

如果card-header里的文本周围有多余空格或换行，用.filter()方法过滤出精准匹配的元素：

const insertHtml = '<h6>自定义副标题</h6><ul><li>列表项1</li><li>列表项2</li></ul>';

// 过滤出文本内容严格为card b的header
$('.card-header').filter(function() {
  return $.trim($(this).text()) === 'card b';
}).next('.card-body').append(insertHtml); // append()是在原有内容后追加

注意事项 #

• 用html()会完全替换card-body内的原有内容，append()则是在末尾追加内容，根据需求选择；
• 如果页面中有多个含card b的card-header，会同时匹配所有符合条件的元素，如需单个匹配可结合父级选择器（比如#myCard .card-header:contains("card b")）缩小范围。

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