Javascript 让外部插件在视图中开火

我有一个非常简单的视图模型，在启动函数时用内容填充div：

这就是功能：

function loadPage(elem){

  var content = document.getElementById('content');
  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
      content.innerHTML = this.response;
  };
  xhr.open('GET', 'views/' + elem + '.html', true);
  xhr.send();

}

问题

问题是，当我加载插件时（在本例中为

swiper

），它根本不会启动

这是一个swiper代码示例，当添加到“正常”加载的页面时，它可以完美地工作，但当使用上面的view方法添加时，不会触发/加载

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
  </div>
</div>

<script src="assets/js/swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        loop: true
    });
</script>

幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
var swiper=新的swiper（“.swiper容器”{
幻灯片视图：3，
空间期:30,，
循环：正确
});

问题

加载视图时如何启动插件？没有使用jQuery

有没有更好的方法来设计这个