有什么辦法可以使200個類似的div具有不同的文件（page0.svg，page1.svg…，page200.svg）

Question

<div class="mySlides">
  <img src="1173/page0.svg" style="width:50%">
</div>

<div class="mySlides">
  <img src="1173/page1.svg" style="width:50%">
</div>

因此，我需要使用不同的.svg文件制作大約200個以上的div代碼，而文件名中唯一改變的是數字。 我正在嘗試創建一本數字圖書，並且所有頁面都具有.svg格式。

Answer 1

當然，有很多不同的方法可以做到這一點。 如上所述，與向DOM順序添加200 div相比，您可以使用片段來提供更好的性能。

var fragment = document.createDocumentFragment();

for(i=0;i<200;i++){
    var new_div = document.createElement("div");
    new_div.classList.add("mySlides");
    new_div.innerHTML += '<img src="1173/page'+i+'.svg" style="width:50%">';
    fragment.appendChild(new_div);
}

document.body.appendChild(fragment);

看到它在這里運行： https : //codepen.io/67hours/pen/gBMygW

Answer 2

在純JS中，您可以編寫如下內容。 與使用元素的innerHTML屬性進行HTML字符串操作/並置相比，使用document.createElement然后將新元素附加到父容器是一種更好的操作DOM的方法。

用硬編碼循環限制代替代表實際數字的變量（假設您還有一個0.svg ）：

var IMAGE_COUNT = 200;
for (var i = 0; i < IMAGE_COUNT; i++) {
    var frag = document.createElement("div");
    var img = document.createElement("img");
    frag.classList.add('mySlides');
    frag.style = "width:50%;";
    img.src = '1173/page/' + i + '.svg';

    frag.appendChild(img);
    document.body.appendChild(frag);
}

Answer 3

for最多200次循環並動態生成html並將其附加到父div

var container = document.getElementById("container");
  var html = "";
   for(var i=0;i<=200; i++)
   {
    html += "<div class='mySlides'><img src='1173/page"+i+".svg' style='width:50%'></div>";
    }
    conatiner.innerHTML = html;

HTML

<div id="container">

</div>