我已经包含了代码的精简版本。我有一个生成列表元素的函数，这些元素有子元素，应该有我包含的库中的3D效果。照原样，我认为库不会影响生成的元素，因为它是由innerHtml设置的，或者在读取末尾的脚本后完成生成。有没有办法做到这一点？
<html>
<script type="text/javascript">
function createList() {
const list = ["https://placekitten.com/300/300", "https://placekitten.com/300/300"];
var output = '<ul>';
list.forEach((example) => {
output +=
`
<li>
<div class="img-container" data-tilt>
<img src="${example}" />
</div>
</li>
`;
});
output += '</ul>';
document.getElementById("catalog-container").innerHTML = output;
}
</script>
<body onload="createList()">
<div id="catalog-container">
</div>
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>
</html>
在库脚本运行之前创建元素。有几种选择。一种是将脚本标记放在库的标记之前，并避免使用body onload处理程序：
<body>
<div id="catalog-container">
</div>
<script>
function createList() {
// ...
}
createList(); // or remove the function entirely
</script>
<script src="vanilla-tilt.js"></script>
另一种方法是在脚本运行后动态注入库。在您的功能结束时：
document.body.appendChild(document.createElement('script')).src = 'vanilla-tilt.js';
或者手动调用新元素的库。