Javascript 如何在异步脚本改变dom后执行js代码？

我正在加载一个改变dom的异步脚本。如果我在脚本中添加一个

onload

，我可以在脚本加载后运行代码。但是，该脚本尚未编辑dom。有没有办法等到dom编辑完成后再运行我的代码

简单的例子：

<script>
  function onLoad() {
    // this logs null, but it should return a div
    console.log('loaded', document.getElementById('asdf'));
  }

  var s = document.createElement("script");
  s.type = "text\/javascript";
  s.onload = onLoad
  s.src = "some script that adds a div with id of asdf";
  document.head.insertAdjacentElement('beforeend', s);
</script>

函数onLoad（）{
//此日志为null，但应返回div
console.log（'loaded'，document.getElementById（'asdf'）；
}
var s=document.createElement（“脚本”）；
s、 type=“text\/javascript”；
s、 onload=onload
s、 src=“添加id为asdf的div的脚本”；
document.head.insertAdjacentElement（'beforeend'，s）；

尝试添加

addEventListener

以等待元素加载完毕，然后让它运行脚本

函数onLoad（）{
文件.附录列表器（“加载”，功能（e）{
如果（e.target.id==“asdf”）{
console.log（'loaded'，document.getElementById（'asdf'）；
}
});
}

问题是您正在立即调用

onLoad（）

。删除

（）

以引用函数

onLoad

，而不是调用该函数

asdf
函数onLoad（）{
//此日志为null，但应返回div
console.log（'loaded'，document.getElementById（'asdf'）；
}
var s=document.createElement（“脚本”）；
s、 type=“text/javascript”；
s、 onload=onload；
s、 src=“data:text/javascript，console.log（'script src'）”；
document.head.insertAdjacentElement（'beforeend'，s）；

向该脚本添加回调…以扩展Jonas w所说的内容，该异步脚本应公开一个api，供其他脚本与之交互。您可以使用

addEventListener

等待某个特定元素加载，然后让它立即运行您正在调用的脚本

onLoad

。它的可能重复项仍然会在控制台而不是div元素中记录为null。@Daniel您能创建一个plnkr需要演示吗？看见