Javascript 如何仅在某个元素已加载并在标记中时调用函数

我正在使用一个外部API，它在我的标记中构建了一个div结构（在页面加载时，它添加了

.build div

）。我想用JS/jQuery修改这个结构。问题：一旦有标记要操作，我如何调用函数。我的尝试：

function changeStructure() { $('.build-div').appendTo('.another'); };
window.onload = changeStructure;

但这似乎不起作用。有效的方法是：

function changeStructure() { 
  setTimeout(function() { 
     $('.build-div').appendTo('.another'); }, 500) 
};
window.onload = changeStructure;

但是我不想硬编码任何猜测的超时以使函数工作。那么，我如何检测元素是否存在，并尽快启动函数呢

---

谢谢

如果API没有事件/回调，您可以使用

域节点插入

事件

$(document).on('DOMNodeInserted', function(e){
    if ($(e.target).is('.build-div')) {
        $(e.target).appendTo('.another');
    }
});

---

注意：这在IE8中不受支持。除此之外，您还必须使用计时器不断检查元素是否已添加，直到添加完毕，然后才能将其附加到其他位置。

如果API没有事件/回调，则可以使用

DOMNodeInserted

事件

$(document).on('DOMNodeInserted', function(e){
    if ($(e.target).is('.build-div')) {
        $(e.target).appendTo('.another');
    }
});

注意：这在IE8中不受支持。除此之外，您必须使用计时器不断检查元素是否已添加，直到添加完毕，然后才能将其附加到其他位置。

可能值得研究。它们允许您对DOM中的更改做出反应。我写了一篇用突变观察者做实验的文章。该插件绝不是生产就绪，但也许它可以作为您工作的基础

请注意，只有现代浏览器才支持变异观察者。如果您正在寻找更通用的解决方案，可以使用定期检查是否存在

$（'.build div'）

，然后在加载间隔后清除间隔。

可能值得研究。它们允许您对DOM中的更改做出反应。我写了一篇用突变观察者做实验的文章。该插件绝不是生产就绪，但也许它可以作为您工作的基础

请注意，只有现代浏览器才支持变异观察者。如果您正在寻找更通用的解决方案，可以使用定期检查是否存在

$（'.build div'）

，然后在加载间隔后清除间隔。

除非“外部API”提供了表示已完成DOM修改的方法，您将不得不求助于使用setInterval/clearInterval或链式SetTimeout

function changeStructure() { 
  if ($('.build-div').length > 0)
  {
    ... your code
    $('.build-div').appendTo('.another');
  }
  else
    setTimeout(changeStructure, 100);
};

除非“外部API”提供了一种表示它已完成DOM修改的方法，否则您将不得不求助于使用setInterval/clearInterval或链式setTimeout

function changeStructure() { 
  if ($('.build-div').length > 0)
  {
    ... your code
    $('.build-div').appendTo('.another');
  }
  else
    setTimeout(changeStructure, 100);
};

---

正如您要求的

如何检测元素是否存在
。如果元素存在。。那么
$（'.build div'）
将不会返回null…@Rakesh_Kumar那么编写此函数的好方法是什么呢？通过间隔检查，只要
$（'.build div'）
不再返回null？如果您只是在等待页面完成加载，可以使用
$（document）.ready（function（）{YOUR STUFF}）
@Rakesh_Kumar-jquery选择器函数从不返回
null
。您必须检查“$（“..”）.length以确定是否有与选择器匹配的元素退出。这不可能是真的（您能否显示对api的请求是如何工作的？正如您所要求的
如何检测元素是否存在
。如果元素存在..则
$（'.build div'））
不会返回null…@Rakesh_Kumar那么写这个函数的好方法是什么呢？只要
$（'.build div'），通过间隔检查；
不再返回null？如果您只是在等待页面完成加载，您可以使用
$（document）.ready（function（）{YOUR STUFF}）
@Rakesh_Kumar-jquery选择器函数从不返回
null
。您必须检查“$（“..”）.length以确定是否有与选择器匹配的元素退出。这不可能是真的（你能展示你对api的请求是如何工作的吗？谢谢，确实是一个好方法，但我需要IE 8支持，所以我想我会选择间隔。谢谢，确实是一个好方法，但是我需要IE 8支持，所以我想我会选择间隔。