javascript - javascriptで作成したdiv要素にjavascriptを実装する方法は?

Question

このリンクからこのjavascriptを使用しています。

次のコードを使用して、javascript で新しい div 要素を作成しました。

<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
 value= VALUE_FROM_DB.split("||");
 for (k=0;k<value.length;k++)
 {
    if (value[0] == paramName1)
   {
      return unescape(value[k]);
      console.log("no of swipe views ");
   }
    var val = k+1;
    var superdiv = document.getElementById('swiper-wrapper');
    var newdiv = document.createElement('div');
    var divIdName = 'swiper-slide'+val;
    console.log("div name: "+divIdName);
    newdiv.setAttribute('id',divIdName);
    newdiv.setAttribute('class','swiper-slide');
    newdiv.style.width = "25%";
newdiv.style.height = "30%";
    superdiv.appendChild(newdiv);
    var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
    console.log("check value"+cnt1);
    document.getElementById(divIdName).innerHTML=cnt1;
    console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}

htmlコード

<div id="swipe_body">
    <div class="swiper-container swiper-threshold">
        <div class="swiper-wrapper" id="swiper-wrapper">

        </div>
    </div>
</div>

CSS コード:

.clinical       
{
    font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
 background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
 width:auto; height:30%; display:block; overflow:hidden;float:left; 
}

出力は次のようになります

しかし、私はこのように取得したいと思います

スワイプすると、このように取得する必要があります

この問題を解決する方法を教えてください..

編集:スタイルの後、javascript の前に次のコードを指定しました。

</style>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
    <script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="main.js"></script>
    <script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
    <script type="text/javascript" src="swiper-demos.js"></script>
    <script type="text/javascript" charset="utf-8">

編集2：

 var cnt1 = '<div id="container" class="container"><span><img    src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
 console.log("check value"+cnt1);
 document.getElementById(divIdName).innerHTML=cnt1;
 document.querySelector('.swiper-container');

document.querySelector('.swiper-container');これも追加しました

function onDeviceReady() 
{   var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
 }); 

唯一の改善点は、最初のスライドのみがあり、スワイプではないことです。