Можно ли как-нибудь сделать 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>

Так что мне нужно сделать около 200 кодов div, как указано выше, для разных файлов .svg, и единственное, что меняет имя файла, - это число.Я пытаюсь создать цифровую книгу, и у меня есть все страницы в формате .svg.

Answer 1

Конечно, есть много разных способов сделать это.Как предложено выше, вы можете использовать фрагмент, чтобы дать вам лучшую производительность, чем последовательное добавление 200 DIV к DOM.

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 вы могли бы написать что-то вроде этого.Использование document.createElement и последующее добавление новых элементов в родительский контейнер является гораздо более подходящим способом манипулирования DOM, чем манипулирование / конкатенация строк HTML с атрибутами innerHTML элементов.

Замените жестко запрограммированный предел цикла для переменной, представляющей фактическое число (также предполагается, что у вас есть 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>