动态添加DOM元素时onload事件未触发的原因解析（附代码示例）

嘿，这个问题我之前也踩过坑！核心原因其实很简单：<p>这类普通块级元素本身就不支持onload事件。

onload事件是专门为需要加载外部资源的元素设计的——比如<img>（加载图片资源）、<script>（加载脚本文件）、<iframe>（加载内嵌页面），或者全局的window、document对象。像<p>、<div>这种仅渲染文本/内部元素的节点，浏览器根本不会为它们触发onload事件，不管你是静态写在HTML里，还是用JS动态创建的。

另外你的代码还有个小细节问题：就算某个元素支持onload，用setAttribute绑定事件时，也需要写成调用形式的字符串（比如'myFunction()'），而不是只写函数名'myFunction'——不过这不是这次事件不触发的关键，毕竟本质问题是<p>不支持onload。

怎么实现你想要的效果？ #

如果你想在<p>元素被成功添加到DOM后执行代码，最直接的方式就是在appendChild之后直接调用函数：

function create() {
  var para = document.createElement("p");
  var node = document.createTextNode("This is new.");
  para.appendChild(node);
  var element = document.getElementById("div1");
  element.appendChild(para);
  // 元素已经挂载到DOM，直接执行目标函数
  myFunction();
}

function myFunction() {
  alert(1);
}

如果是更复杂的场景（比如需要监听多个动态添加的元素），可以用MutationObserver来监听父元素的DOM变化，当新的<p>被添加时触发逻辑，但对于这个简单场景来说，直接调用函数就足够高效了。

内容的提问来源于stack exchange，提问作者Willem van der Veen