Javascript 如何在jquery中检测何时向文档中添加了新元素？

如何在jquery中检测何时向文档中添加了新元素

说明： 我想知道类为“column header”的元素何时添加到文档中。我计划在这些元素上运行一些javascript

我该怎么做？我使用jQuery javascript库。

试试这个

if($('.column-header')){  
//do something...
} 

或者你也可以做类似的事情……它会更通用

jQuery.exists = function(selector) { return ($(selector).length > 0); }

if ($(selector).exists()) {
  // Do something
}

你应该去看看报纸。我相信这就是你要找的

$(document).bind('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

DOMNodeInserted

是一个DOM级别3事件。这反过来意味着，您需要一个全新的浏览器来支持此类事件

---

参考资料：

如果您想对其执行jQuery，还可以执行以下操作：

更新：

---

这条联系好像断了。如果要为具有class

列标题的所有元素设置相同的函数，请尝试
然后可以使用jquerylive（）

使用轮询如何？继续搜索类为“column header”的元素，直到找到它，然后执行操作。看起来很简单。
我会使用setInterval反复检查元素。例如

var curLength=0;
setInterval(function(){
  if ($('.column-header').length!=curLength){
    curLength=$('.column-header').length;
    // do stuff here
  }
},100);

此代码将每隔100毫秒检查一次任何新的.columheader元素
我认为上面提到的DOMNodeInserted方法可能是最性感的选择，但是如果您需要使用IE8及更低版本的工具，您可以执行以下操作：

// wrap this up in en immediately executed function so we don't 
// junk up our global scope.
(function() {
   // We're going to use this to store what we already know about.
   var prevFound = null;

   setInterval(function() {
      // get all of the nodes you care about.
      var newFound = $('.yourSelector');

      // get all of the nodes that weren't here last check
      var diff = newFound.not(prevFound);

      // do something with the newly added nodes
      diff.addClass('.justGotHere');

      // set the tracking variable to what you've found.
      prevFound = newFound;
   }, 100);
})();

这只是基本的想法，你可以随意改变它，用它制作一个方法，保留setInterval的返回值，这样你就可以停止它，或者做任何你需要做的事情。但它应该完成这项工作。
到2013年，突变事件都不推荐使用。如果其他人在检测dom中的新元素时遇到问题，您可以改用MutationObserver：
被接受的答案使用了2011年过时的插件，最高投票率的答案使用了现在已经过时的突变事件

今天，当元素添加到DOM中时，您应该使用a来检测。现在，所有现代浏览器（Chrome 26+、Firefox 14+、IE11、Edge、Opera 15+等）都广泛支持mutationObserver

下面是一个简单的示例，说明如何使用
MutationObserver
来侦听向DOM添加元素的时间

为简洁起见，我使用jQuery语法构建节点并将其插入DOM

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

var myElement=$（“你好世界”）[0]；
var观察者=新的突变观察者（功能（突变）{
if（document.contains（myElement））{
log（“它在DOM中！”）；
observer.disconnect（）；
}
});
observe（文档，{attributes:false，childList:true，characterData:false，subtree:true}）；
$（“正文”）。附加（myElement）；//console.log：它在DOM中！

每当从
文档中添加或删除任何节点时，
观察者
事件处理程序将触发。在处理程序内部，我们然后执行
contains
检查，以确定
myElement
现在是否在
文档中

您不需要迭代存储在
translations
中的每个MutationRecord，因为您可以直接在
myElement
上执行
文档。contains
检查

要提高性能，请将
document
替换为将在DOM中包含
myElement
的特定元素。
按照链接进行操作，该链接对其进行了更多解释问题仍然存在，何时触发该语句？是的，这就是问题所在。我不想一次又一次地触发它。是的，但问题是它只会在单击时触发，而不会在渲染时触发。嗯。。。这看起来很有趣。这是未来开发的最佳选择，IMO。但是应该注意的是，IE8和更低版本不支持这一点。我在下面添加了一个答案，如果有人想在IE8和更低版本中以一种快速而肮脏的方式实现类似的功能，并且出于某种原因不想使用livequery，那么从2016年开始，我们就不推荐使用livequery了。建议不要在旧项目或新项目中使用此类技术。是的，那会管用的，但是UI体验会有一个滞后。希望避免这种情况。我认为这取决于页面上dom结构的深度和宽度。我不认为使用一些jquery插件可以获得更快的性能——应该在特定的例子中进行测试。这将是相当繁重的，但是没有对nodeaded事件的本机支持。这是最好的了。不管怎样，实时查询和突变事件都肯定会使用某种setInterval循环。这一点都不重，将间隔设置为变量，然后清除它。不要只是回答粘贴链接，而是详细说明你的答案。（我来这里是因为你的答案有标志）livequery没有exist@w35l3y更新了答案中的链接。
// wrap this up in en immediately executed function so we don't 
// junk up our global scope.
(function() {
   // We're going to use this to store what we already know about.
   var prevFound = null;

   setInterval(function() {
      // get all of the nodes you care about.
      var newFound = $('.yourSelector');

      // get all of the nodes that weren't here last check
      var diff = newFound.not(prevFound);

      // do something with the newly added nodes
      diff.addClass('.justGotHere');

      // set the tracking variable to what you've found.
      prevFound = newFound;
   }, 100);
})();

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!