使用 innerHtml 添加的元素不受 Javascript 库影响答案

【问题标题】：Elements added with innerHtml not affected by Javascript library使用 innerHtml 添加的元素不受 Javascript 库影响
【发布时间】：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”标题）

标签： javascript html innerhtml

【解决方案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。

【讨论】：