理解问题：预加载脚本与动态DOM元素
在现代web开发中，页面内容往往是动态生成的，例如通过用户交互（点击按钮、表单提交）或异步数据请求。然而，javascript脚本通常在页面加载时便会执行。这就导致了一个常见的时序问题：如果一个脚本尝试访问或操作一个尚未被创建的dom元素，它将无法找到该元素，从而导致操作失败。
例如，考虑以下HTML结构和JavaScript文件：
其中 script1.js 包含创建新DOM元素的逻辑：
// static/script1.js
function add_product(){
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML=" 新产品
这是一个可拖拽的盒子
";
document.body.appendChild(add_product_div);
}而 script2.js 尝试在页面加载时访问这些元素：
立即学习“Java免费学习笔记（深入）”；
// static/script2.js
const divs = document.getElementsByClassName("draggable_box");
console.log(divs); // 在点击按钮创建元素之前，这里会输出一个空的HTMLCollection由于 script2.js 在 add_product 函数被调用（即 draggable_box 元素被创建）之前就已经执行完毕，因此它无法找到任何匹配的元素。为了解决这个问题，我们需要一种机制，使得在元素被动态创建之后，预先加载的脚本能够感知并访问到这些新元素。以下是几种实现此目标的策略。
策略一：通过函数返回值传递元素引用
这是最直接且通常是开销最小的方法。当负责创建DOM元素的函数完成其任务后，它直接返回新创建的DOM元素的引用。调用者可以捕获这个引用并立即对其进行后续操作。这种方法适用于创建元素后立即需要对其进行特定操作的场景。
实现方式： 修改创建元素的函数，使其返回新创建的DOM节点。
示例代码：
通过返回值访问动态DOM
