jQuery中如何实现类似CSS的动态加载元素自动生效逻辑？

嘿，我完全懂你的困扰——就像CSS能自动对所有匹配的元素（不管是页面加载时就有的，还是后来动态添加的）生效，但普通的jQuery DOM操作只对执行代码时已经存在于DOM中的元素起作用，对吧？

为什么你的原代码不生效？ #

当$(document).ready()执行的时候，那些通过点击按钮才会添加的<p>标签还根本没出现在页面里，所以$('p').after(...)只能选中当时已经存在的p标签，后续新增的自然就被忽略了。

两种解决方案，按需选择 #

方案1：在创建元素时直接处理（简单高效）

如果你只是通过这个按钮来添加p标签，最直接的方式就是在创建p标签的同时，给它加上需要的<span>。这样不用额外监听DOM变化，代码也更简洁：

$('button').on('click', function(){ 
  // 创建新的p元素
  const newPara = $('<p>Hello World !</p>');
  // 直接给它添加后面的span
  newPara.after('<span>abcd</span>');
  // 把p和span一起加到页面里
  $('body').append(newPara);
})

或者更紧凑的写法：

$('button').on('click', function(){ 
  $('body').append('<p>Hello World !</p>')
           .find('p:last') // 找到刚添加的那个p标签
           .after('<span>abcd</span>');
})

方案2：用MutationObserver监听DOM变化（通用覆盖所有场景）

如果页面上可能有多种方式动态添加p标签（不只是这个按钮），想要完全模拟CSS的“自动匹配”逻辑，就可以用MutationObserver来监听DOM的变化，只要有新的p标签被添加，就自动执行你的操作：

$(document).ready(function(){
  // 创建一个观察者实例
  const observer = new MutationObserver(function(mutations) {
    // 遍历所有DOM变化记录
    mutations.forEach(function(mutation) {
      // 检查每一个新增的节点
      mutation.addedNodes.forEach(function(node) {
        // 如果新增的就是p标签
        if (node.tagName === 'P') {
          $(node).after('<span>abcd</span>');
        } 
        // 如果新增的是包含p标签的容器，就遍历里面的p标签
        else if (node.childNodes.length > 0) {
          $(node).find('p').each(function() {
            $(this).after('<span>abcd</span>');
          });
        }
      });
    });
  });

  // 配置监听规则：监听body及其子树的节点添加
  const observerConfig = { childList: true, subtree: true };

  // 开始监听body的变化
  observer.observe(document.body, observerConfig);
});

这个方法就像给页面装了个“监视器”，不管什么时候、通过什么方式新增的p标签，都会自动被处理，完美实现你想要的类似CSS的逻辑。

小提醒：修正原代码的语法错误 #

你的$(document).ready()代码少了一个闭合的)，正确的写法应该是：

$(document).ready(function(){ 
  $('p').after('<span>abcd</span>');
});

不过就算修正了这个，还是解决不了动态元素的问题，上面的方案才是关键~

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