使用 innerHtml 添加的元素不受 Javascript 库影响
Posted
技术标签:
【中文标题】使用 innerHtml 添加的元素不受 Javascript 库影响【英文标题】：Elements added with innerHtml not affected by Javascript library 【发布时间】：2021-12-28 01:34:49 【问题描述】：我已经包含了我的代码的精简版本。我有一个生成列表元素的函数，并且这些元素有子元素，这些子元素应该具有来自我包含的库的 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>
【问题讨论】：
见the documentation（向下滚动到“JS Way”标题） 【参考方案1】：在库脚本运行之前创建元素。有几种选择。一种是将您的脚本标签放在库之前，并避免使用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';
或call the library on your new elements manually。
【讨论】：
以上是关于使用 innerHtml 添加的元素不受 Javascript 库影响的主要内容，如果未能解决你的问题，请参考以下文章
当通过 innerHTML 添加元素时，为啥我的动画会“重播”？
JavaScript中，可以用元素的innerHTML直接添加子元素吗？