JQuery的.after方法不生效？如何为指定class的div追加后续节点

你现有代码完全不生效，本质是jQuery多类选择器的语法使用错误，很多人容易把HTML里class属性的空格分隔写法直接套到jQuery选择器里，其实两者规则完全不同：

• HTML中写class属性时，空格只是用来分隔同一个元素的多个类名
• 但jQuery选择器里的空格代表「后代嵌套查找」的逻辑，要选中同时带多个类名的同个元素，所有类名前都要加.，类名之间不能留空格
• 你原代码里写的选择器.col-md-12 col-sm-6 stm-filter_transmission，实际执行逻辑是：查找所有带col-md-12类的元素内部、嵌套的所有带col-sm-6类的元素内部、再嵌套的所有带stm-filter_transmission类的元素，根本匹配不到你那个同时挂了三个类的目标div，所以调用.after()不会产生任何页面变化。

1. 把选择器改成三个类名无间隔用点拼接的格式，正确写法是：$(".col-md-12.col-sm-6.stm-filter_transmission")
2. 如果是要插入自定义div，直接把.after()方法里的测试p标签替换成目标div的HTML代码即可。

完整可运行的参考代码：

$(function (){ 
    // 精准选中同时携带三个类名的目标div
    const targetDom = $(".col-md-12.col-sm-6.stm-filter_transmission");
    // 在目标元素后方插入自定义div
    targetDom.after( "<div class='custom-block'>这里是你需要插入的div内容</div>" );
});

• 确认目标div不是异步逻辑渲染插入的：如果元素是接口返回后才追加到页面上的，仅靠$(function(){})的DOM就绪回调执行插入，会因为目标元素还没生成导致找不到节点，需要把插入逻辑放到目标元素真实渲染完成的时机再执行
• 确认页面没有其他库占用$符号，避免jQuery核心方法被覆盖失效

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