Javascript 有没有办法用不同的文件制作200个类似的div（page0.svg，page1.svg…，page200.svg）

因此，我需要使用不同的.svg文件生成大约200个类似于上述的div代码，文件名中唯一改变的是编号。我正在尝试创建一本数字图书，所有页面都是.svg格式的

使用

for

循环到200，动态生成html并将其附加到父div中

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

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

var container=document.getElementById（“容器”）；
var html=“”；
对于（var i=0；i当然，有很多不同的方法可以做到这一点。如上所述，您可以使用片段来提供比顺序向DOM添加200个div更好的性能

<div id="container">

</div>

var fragment=document.createDocumentFragment（）；
对于纯JS中的（i=0；i，您可以编写类似的内容。使用
document.createElement
然后将新元素附加到父容器中是一种比HTML字符串操作/使用元素的
innerHTML
属性连接要优越得多的操作DOM的方法

将硬编码循环限制替换为表示实际数字的变量（同时假设您有一个
0.svg
）：

var图像计数=200；
对于（变量i=0；i
我会使用一个循环来创建一个片段，手动生成并连接一个HTML字符串是在浪费内置的DOM文档和片段操作功能（以及其他功能）--例如，
document.createDocumentFragment
，正如@enxaneta所建议的那样。我知道，但这也是一种实现这一点的方法，我理解你为什么这么说，我尊重你的观点，我不同意。如果有人试图学习HTML/JS，但遇到这种情况，可能会认为这是一种推荐的方法，但事实并非如此t、 为什么？因为它a）很脆弱，不能很好地适应变化，b）由于许多基本假设而很难保持，c）很难不费吹灰之力地扩展/丰富，d）将行为和表达问题紧密地结合在一起（当你的设计师想要改变布局时会发生什么？）。HTHnice方法-为什么不采用与使用
img
标记的
document.createElement
相同的方法？一致性将有助于可读性，如果没有其他：）@JoshE是的，非常正确，我想我是在偷懒！请在中编辑：）
<div id="container">

</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);

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);
}