加载一个anime.js动画html文件作为HTML部分的背景

Question

我正在尝试使用这个anime.js 文件作为网站横幅的背景。这里

<section id="banner">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-diamond"></span>
    </div>
    <!-- Animation Script -->
    <!--
      <script>
        document.getElementById("banner").innerHTML = '<object type="text/html" data="animation/index.html"></object>';
      </script>
    -->
    <h2>TEXT</h2>
    <p>MORE TEXT</p>
  </div>
</section>

我正在加载这样的脚本，但问题是它完全替换并加载了inner div。我应该如何让它加载到整个部分？我也希望内部 div 完好无损。

Answer 1

问题是因为您完全覆盖了 #banner 元素的 HTML，并完全清除了其现有内容。

要解决此问题，请单独创建 object 元素，然后使用 appendChild() 将其添加到 #banner 元素：

var obj = document.createElement('object');
obj.type = 'text/html';
obj.data = 'animation/index.html';
document.getElementById('banner').appendChild(obj);

<section id="banner">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-diamond"></span>
    </div>
    <h2>TEXT</h2>
    <p>MORE TEXT</p>
  </div>
</section>