在jQuery中是否存在存在/加载的元素？

Question

当我单击一个按钮时，我添加了一个带有p标记的段落。我的jQuery如下：

$('button').on('click',function(){
    $('body').append('< p>Hello World !< /p>');
})

因此，当页面加载时，p标记不存在于html页面中，因此JavaScript无法识别以下jQuery：

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

在CSS中，无论元素是否存在，属性都适用于指定的元素。同样，我也想对jQuery做同样的事情。

Answer 1

使用突变观察者。

let observer = new MutationObserver(callback);

function callback (mutations) {
  // do something here
}

observer.observe(targetNode, observerOptions);

Answer 2

如果我正确理解，您想要的是以下内容：

$(document).ready(function(){     // or window.ready(function
    $(document).on('DOMNodeInserted', function(e) {
        if ($(e.target).is('p')) {
            $(e.target).after('<span>abcd</span>');
        }
    })

})

这将在每次将<span>abcd</span>标记添加到DOM时添加p。