Javascript 我如何动态地将一个数字递增一次来构建元素？

我正在做一个画廊。所有的图片都被命名为1.jpg、2.jpg、3.jpg等等-它一直扩展到200.jpg

复制和粘贴是可以的，但非常耗时

  <div class="slideshow-container">
          <div class="slideshowDisplay fade">
            <img src="/images/media/1.jpg" width="100%">
          </div>

          <div class="slideshowDisplay fade">
            <img src="/images/media/2.jpg" width="100%">
          </div>

          <div class="slideshowDisplay fade">
            <img src="/images/media/3.jpg" width="100%">
          </div>

我可以使用for循环或类似工具为我创建所有元素吗？我唯一的问题是，for循环用于多次重复代码块，不是吗，所以这对我来说不起作用

有没有另一种方法可以让我创建元素而不必花很长时间手工增加数字

到目前为止，我已经：

for(var i=0; i < 200; i++){
   var newDiv = document.createElement('div');
   newDiv.className = 'slideshowDisplay fade';
}

for（变量i=0；i<200；i++）{
var newDiv=document.createElement（'div'）；
newDiv.className='slideshowDisplay fade'；
}

没有别的了

非常感谢您的指导。

基本DOM创建和附加

您只缺少将新元素附加到

slideshow容器中并添加其内容。您可以使用
i
变量创建增量图像
src

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = sc.appendChild(document.createElement('div'));
   newDiv.className = 'slideshowDisplay fade';

   var img = newDiv.appendChild(document.createElement("img"));
   img.width="100%";
   img.src = "/images/media/" + (i + 1) + ".jpg";
}

这会减少创建和附加新元素的繁琐程度

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = create("div", {className: "slideshowDisplay fade"}, sc);
   create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"}, newDiv);
}

然后，您可以以镜像新DOM结构的方式嵌套对
create
的调用

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   sc.appendChild(
     create("div", {className: "slideshowDisplay fade"}, 
       create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"})
     )
   );
}

var sc=document.querySelector（“.slideshow容器”）
对于（变量i=0；i<200；i++）{
理学学士(
创建（“div”{className:“slideshowDisplay fade”}，
创建（“img”{width:“100%”，src:“/images/media/”+（i+1）+“.jpg”}）
)
);
}
基本DOM创建和追加

您只缺少将新元素附加到
slideshow容器中并添加其内容。您可以使用
i
变量创建增量图像
src

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = sc.appendChild(document.createElement('div'));
   newDiv.className = 'slideshowDisplay fade';

   var img = newDiv.appendChild(document.createElement("img"));
   img.width="100%";
   img.src = "/images/media/" + (i + 1) + ".jpg";
}

这会减少创建和附加新元素的繁琐程度

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = create("div", {className: "slideshowDisplay fade"}, sc);
   create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"}, newDiv);
}

然后，您可以以镜像新DOM结构的方式嵌套对
create
的调用

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   sc.appendChild(
     create("div", {className: "slideshowDisplay fade"}, 
       create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"})
     )
   );
}

var sc=document.querySelector（“.slideshow容器”）
对于（变量i=0；i<200；i++）{
理学学士(
创建（“div”{className:“slideshowDisplay fade”}，
创建（“img”{width:“100%”，src:“/images/media/”+（i+1）+“.jpg”}）
)
);
}
实际上，DOM中只需要一个父div。然后，只需使用诸如
document.createElement
和
appendChild
等函数，将新创建的div存储在父元素中，并包含图片


var source=“/images/media/”；
var parent=document.getElementById（'parent'）；
对于（变量i=0；i<10；i++）{
var newDiv=document.createElement（'div'）；
newDiv.className='slideshowDisplay fade'；
var img=document.createElement（'img'）；
img.src=source+i+'.jpg'；
img.width=‘100%’；
新分部附属儿童（img）；
父.子（newDiv）；
}
实际上，DOM中只需要一个父div。然后只需使用诸如
document.createElement
和
appendChild
之类的函数，即可将新创建的div和图片存储在父元素中


var source=“/images/media/”；
var parent=document.getElementById（'parent'）；
对于（变量i=0；i<10；i++）{
var newDiv=document.createElement（'div'）；
newDiv.className='slideshowDisplay fade'；
var img=document.createElement（'img'）；
img.src=source+i+'.jpg'；
img.width=‘100%’；
新分部附属儿童（img）；
父.子（newDiv）；
}

你可以使用JQuery吗？是的，我可以，这不是问题。你可以使用JQuery吗？是的，我可以，这不是问题。我会将要附加到已创建div的代码片段添加到其父级：这里是“幻灯片展示容器”@ValLeNain:Yep，已经添加。“一开始就忘了。”斜视作为一个初学者，我脑子里已经想了很多。这是意料之中的。如果我在“进一步阅读”这类主题，我应该在谷歌上搜索什么？我发现JS的一些元素我比其他元素使用得更多。这是否属于我可以进一步研究的特定领域？@davv：取决于你对哪些部分感到困惑。如果您不确定某个特定方法的作用，那么最好只搜索该术语。否则，我会修改代码，看看各种更改是如何影响它的。嵌入
console.log（）
，将值打印到控制台，以便您可以看到代码运行时发生的情况。我会将要附加到已创建div的代码段添加到其父级：此处添加了“slideshow容器”@ValLeNain:Yep。“一开始就忘了。”斜视作为一个初学者，我脑子里已经想了很多。这是意料之中的。如果我在“进一步阅读”这类主题，我应该在谷歌上搜索什么？我发现JS的一些元素我比其他元素使用得更多。这是否属于我可以进一步研究的特定领域？@davv：取决于你对哪些部分感到困惑。如果您不确定某个特定方法的作用，那么最好只搜索该术语。否则，我会修改代码，看看各种更改是如何影响它的。嵌入
console.log（）。