如何使用jQuery在固定文本前插入图片且不影响原有类名样式

可以实现，你可以通过jQuery精准匹配指定文本的元素插入图片，不会影响其他页面同类名的元素。

核心实现代码 #

// 精准匹配文本完全为「picture1 sample text」的元素
$('div.a').filter(function() {
  // 去除文本前后空白字符后做全等匹配，避免DOM空白符干扰匹配结果
  return $(this).text().trim() === 'picture1 sample text';
}).prepend('<img src="替换为你的图片实际地址" alt="picture1" style="vertical-align: middle; margin-right: 4px;" />');

方案说明 #

• 这里没有直接用$('.a')全局选择器加样式，而是先做文本匹配过滤，只有符合文本要求的元素才会被处理，完全不会影响其他页面的同类名元素。
• 用filter做全等匹配比jQuery自带的:contains模糊匹配更稳妥，不会误匹配到包含该段文本的其他长文本元素。
• prepend方法会把图片插入到目标元素内部的最靠前位置，刚好实现你要的「图片在前、文本在后」的展示效果。
• 图片样式可以直接写在行内style属性中，完全不会产生全局样式污染。

如果你的页面中可能存在多个匹配到的元素，只需要处理第一个的话，在prepend前加.first()即可：

$('div.a').filter(function() {
  return $(this).text().trim() === 'picture1 sample text';
}).first().prepend('<img src="替换为你的图片实际地址" alt="picture1" />');

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