假设获取一个DOM作为引用节点，然后创建并插入一个DOM，作为新节点。
如果我尽快创建并插入新的Node，那么DOMContentLoaded是上述情况下的最佳事件选项吗？
引用节点不是图像，而是HTMLnknowElement，例如HTMLDivElement、HTMLSpanElement。
下面是一个示例代码流。
window.addEventListener("DOMContentLoaded", (event) => {
// Below is an example code as pseudo code.
// Get a reference DOM.
const referenceEl = document.querySelector(".foo .reference-dom");
// Create a new DOM.
const newEl = document.createElement(htmlTag);
// Insert the new DOM before reference DOM.
referenceEl.parentElement.insertBefore(newEl, referenceEl.nextElementSibling)
})
如果我尽快执行代码，在上述情况下，DOMContentLoaded是最好的事件选项吗？
如果您希望代码尽快运行，考虑到它所依赖的DOM中已经存在的元素，最简单的方法是将<script>标记放在脚本运行所需的最后一个元素下方。例如，对于.reference-dom，您可以执行
<div class="reference-dom">
...
</div>
<script>
const referenceEl = document.querySelector(".foo .reference-dom");
// or
const referenceEl = document.currentScript.previousElementSibling;
// ... etc
如果这不是一种选择，另一种可用的方法是提前向文档中添加子树MutationObserver(例如在<body>的开头，并观察addedNodes以查看您要查找的节点是否出现(，但这是昂贵的、过度的，而且更难管理。
对于非常大的页面(例如(，等待DOMContentLoaded确实可能需要很长时间，在这种情况下，您所做的将是一个好主意-在事件触发之前为应用程序添加基本功能，以确保良好的用户体验。(不过，如果你只是在HTML中添加另一个标签，更好的方法是使用模板引擎或服务器端的东西，这样它就可以自己服务于完整的HTML，而不必稍后通过JavaScript在客户端更改它(