JavaScript而不是重复的HTML行

在我的html文件中，我有如下内容：

<p class="image">
<img src="images/20.jpg" alt="20!" width="90" height="125" border="0">
<img src="images/19.jpg" alt="19!" width="90" height="125" border="0">
<img src="images/18.jpg" alt="18!" width="90" height="125" border="0">
<img src="images/17.jpg" alt="17!" width="90" height="125" border="0">
<img src="images/16.jpg" alt="16!" width="90" height="125" border="0">
<img src="images/15.jpg" alt="15!" width="90" height="125" border="0">
<img src="images/14.jpg" alt="14!" width="90" height="125" border="0">
<img src="images/13.jpg" alt="13!" width="90" height="125" border="0">
<img src="images/12.jpg" alt="12!" width="90" height="125" border="0">
<img src="images/11.jpg" alt="11!" width="90" height="125" border="0">
</p>

// this is your <p class="image"></p> tag
var imageContainer = document.getElementsByClassName("image")[0];
// placeholder for upcoming images
var image;
// i = 20 is the starting image, i > 10 goes down to but doesn't include 10
for (var i = 20; i > 10; i--) {
    image = document.createElement("img");
    image.setAttribute("src", images + "/" + i + ".jpg");
    image.setAttribute("alt", i + "!");
    image.setAttribute("width", 90);
    image.setAttribute("height", 125);
    image.setAttribute("border", 0);
    imageContainer.appendChild(image);
}

是否有可能用任何循环脚本替换重复代码？我在这方面完全是新手：）

用Jquery试试这个：

//use for loop to loop over your images
    for(var i=20;i>10;i--){
    $('.image').append( '<img src="images/'+i+'.jpg" alt='+i+'!" width="90" height="125" border="0">' );//get the item with class "image" and appended your images
    }

//使用for循环在图像上循环
对于（变量i=20；i>10；i--）{
$（'.image'）.append（''）；//使用类“image”获取项目并附加图像
}

用Jquery试试这个：

//use for loop to loop over your images
    for(var i=20;i>10;i--){
    $('.image').append( '<img src="images/'+i+'.jpg" alt='+i+'!" width="90" height="125" border="0">' );//get the item with class "image" and appended your images
    }

//使用for循环在图像上循环
对于（变量i=20；i>10；i--）{
$（'.image'）.append（''）；//使用类“image”获取项目并附加图像
}

当然，您可以使用

document.createElement（标记名）

执行所需操作的脚本如下所示：

<p class="image">
<img src="images/20.jpg" alt="20!" width="90" height="125" border="0">
<img src="images/19.jpg" alt="19!" width="90" height="125" border="0">
<img src="images/18.jpg" alt="18!" width="90" height="125" border="0">
<img src="images/17.jpg" alt="17!" width="90" height="125" border="0">
<img src="images/16.jpg" alt="16!" width="90" height="125" border="0">
<img src="images/15.jpg" alt="15!" width="90" height="125" border="0">
<img src="images/14.jpg" alt="14!" width="90" height="125" border="0">
<img src="images/13.jpg" alt="13!" width="90" height="125" border="0">
<img src="images/12.jpg" alt="12!" width="90" height="125" border="0">
<img src="images/11.jpg" alt="11!" width="90" height="125" border="0">
</p>

// this is your <p class="image"></p> tag
var imageContainer = document.getElementsByClassName("image")[0];
// placeholder for upcoming images
var image;
// i = 20 is the starting image, i > 10 goes down to but doesn't include 10
for (var i = 20; i > 10; i--) {
    image = document.createElement("img");
    image.setAttribute("src", images + "/" + i + ".jpg");
    image.setAttribute("alt", i + "!");
    image.setAttribute("width", 90);
    image.setAttribute("height", 125);
    image.setAttribute("border", 0);
    imageContainer.appendChild(image);
}

//这是您的
标记
var imageContainer=document.getElementsByClassName（“图像”）[0]；
//未来图像的占位符
var图像；
//i=20是起始图像，i>10向下延伸到但不包括10
对于（变量i=20；i>10；i--）{
image=document.createElement（“img”）；
setAttribute（“src”，images+“/”+i+.jpg”）；
setAttribute（“alt”，i+“！”）；
image.setAttribute（“宽度”，90）；
image.setAttribute（“高度”，125）；
image.setAttribute（“边框”，0）；
appendChild（image）；
}

---

但是，如果您打算经常这样做，更好的选择是使用模板库。它们允许您编写一种HTML“框架”，然后您可以用javascript填充空格。

当然，您可以使用

document.createElement（标记名）

执行所需操作的脚本如下所示：

<p class="image">
<img src="images/20.jpg" alt="20!" width="90" height="125" border="0">
<img src="images/19.jpg" alt="19!" width="90" height="125" border="0">
<img src="images/18.jpg" alt="18!" width="90" height="125" border="0">
<img src="images/17.jpg" alt="17!" width="90" height="125" border="0">
<img src="images/16.jpg" alt="16!" width="90" height="125" border="0">
<img src="images/15.jpg" alt="15!" width="90" height="125" border="0">
<img src="images/14.jpg" alt="14!" width="90" height="125" border="0">
<img src="images/13.jpg" alt="13!" width="90" height="125" border="0">
<img src="images/12.jpg" alt="12!" width="90" height="125" border="0">
<img src="images/11.jpg" alt="11!" width="90" height="125" border="0">
</p>

// this is your <p class="image"></p> tag
var imageContainer = document.getElementsByClassName("image")[0];
// placeholder for upcoming images
var image;
// i = 20 is the starting image, i > 10 goes down to but doesn't include 10
for (var i = 20; i > 10; i--) {
    image = document.createElement("img");
    image.setAttribute("src", images + "/" + i + ".jpg");
    image.setAttribute("alt", i + "!");
    image.setAttribute("width", 90);
    image.setAttribute("height", 125);
    image.setAttribute("border", 0);
    imageContainer.appendChild(image);
}

//这是您的
标记
var imageContainer=document.getElementsByClassName（“图像”）[0]；
//未来图像的占位符
var图像；
//i=20是起始图像，i>10向下延伸到但不包括10
对于（变量i=20；i>10；i--）{
image=document.createElement（“img”）；
setAttribute（“src”，images+“/”+i+.jpg”）；
setAttribute（“alt”，i+“！”）；
image.setAttribute（“宽度”，90）；
image.setAttribute（“高度”，125）；
image.setAttribute（“边框”，0）；
appendChild（image）；
}

---

但是，如果您打算经常这样做，更好的选择是使用模板库。这些允许您编写一种HTML“框架”，然后您可以用javascript填充空白。

javascript:-使用for循环倒计时并在演示id中添加HTML

text=”“；
var c；
对于（变量c=20；c>10；c--）{
文本+=”；
}
document.getElementById（“demo”）.innerHTML=text
Javascript:-使用for循环倒计时并在demo id中添加HTML


text=”“；
var c；
对于（变量c=20；c>10；c--）{
文本+=”；
}
document.getElementById（“demo”）.innerHTML=text
要不使用jQuery而只使用JavaScript，我将执行以下操作：

（为了使事情更简单，我给了p标记一个id而不是一个类。我们可以使用一个类，它只需要另一行代码。）

HTML




Javascript:

for(var i=0; i<20; i++){
    document.getElementById('image').innerHTML += '<img src="http://placehold.it/350x'+ (150 +i) +'" alt="'+ i + '!" width="90" height="125" border="0">';   
}

for（var i=0；i要不使用jQuery而只使用JavaScript，我将执行以下操作：

（为了使事情更简单，我给了p标记一个id而不是一个类。我们可以使用一个类，它只需要另一行代码。）

HTML




Javascript:

for(var i=0; i<20; i++){
    document.getElementById('image').innerHTML += '<img src="http://placehold.it/350x'+ (150 +i) +'" alt="'+ i + '!" width="90" height="125" border="0">';   
}

for（var i=0；i可能是：

var imgs=document.querySelectorAll("p.image img");//array of img objects
for(var i in imgs){//loop
    imgs[i].src="images/"+i+".jpg";//change image
    imgs[i].alt=i+"!";//change attribute
}

这是浏览所有图像的一种方式。
当然，您可以插入包含将要插入的参数的对象数组

var data=[
    {src:"img/img1.png",alt:"alt1"},
    {src:"img/img2.png",alt:"alt2"},
    {src:"img/img3.png",alt:"alt3"},
    {src:"img/img4.png",alt:"alt4"},
    {src:"img/img5.png",alt:"alt5"},
    {src:"img/img6.png",alt:"alt6"},
    {src:"img/img7.png",alt:"alt7"},
    {src:"img/img8.png",alt:"alt8"},
    {src:"img/img9.png",alt:"alt9"},
    {src:"img/img10.png",alt:"alt10"},
];

var imgs=document.querySelectorAll("p.image img");//array of img objects
for(var i in imgs){//loop
    imgs[i].src=data[i].src;//change image
    imgs[i].alt=data[i].alt;//change attr
}

也许是这样：

var imgs=document.querySelectorAll("p.image img");//array of img objects
for(var i in imgs){//loop
    imgs[i].src="images/"+i+".jpg";//change image
    imgs[i].alt=i+"!";//change attribute
}

这是浏览所有图像的一种方式。
当然，您可以插入包含将要插入的参数的对象数组

var data=[
    {src:"img/img1.png",alt:"alt1"},
    {src:"img/img2.png",alt:"alt2"},
    {src:"img/img3.png",alt:"alt3"},
    {src:"img/img4.png",alt:"alt4"},
    {src:"img/img5.png",alt:"alt5"},
    {src:"img/img6.png",alt:"alt6"},
    {src:"img/img7.png",alt:"alt7"},
    {src:"img/img8.png",alt:"alt8"},
    {src:"img/img9.png",alt:"alt9"},
    {src:"img/img10.png",alt:"alt10"},
];

var imgs=document.querySelectorAll("p.image img");//array of img objects
for(var i in imgs){//loop
    imgs[i].src=data[i].src;//change image
    imgs[i].alt=data[i].alt;//change attr
}

数据从何而来？是否有任何数据库，则应通过支持的编程语言（即PHP、ASP）来解决此问题。什么代码？Html是一种标记语言。Html中没有代码？这可以使用jquery吗？@jadwiga您现在可以选择一个答案。数据从何而来？是否有任何数据库，则应解决此问题b你是一种有支持的编程语言，比如PHP，ASP。什么代码？Html是一种标记语言。Html中没有代码。这可以使用jquery吗？@jadwiga现在你可以选择一个答案了。Stackoverflow现在有自己的JSFIDLE类型的东西，哦，你比我强，但大约2秒钟：）我投票支持你……我猜伟大的人都这么想：）@w3bMak3r哈哈！我们不离开网站的另一种方式！而且我认为是阿塞拜疆人正在成为一个min mod，否决投票人（包括我自己），令人讨厌的地狱！Stackoverflow现在有自己的JSFIDLE类型的东西，哦，你赢了我，但大约2秒钟：）我投票给你。。。我猜伟大的人都是这样想的：）@w3bMak3r哈哈！我们不离开网站的另一种方式！而且我认为是阿塞拜疆人正在成为一个min mod，否决投票人（包括我自己），令人讨厌的地狱！为什么人们不解释为什么就投票反对。。让我发疯。我投票给你取消了。为什么人们不解释为什么就投票给我。。让我发疯。我赞成你取消它。嗯，你可以考虑悬停在JavaScript标签中。我想是因为你使用了jQuery，所以这个问题没有调用jQuery。不过我给了你更高的票数让你赢回了一些分数。。我不能忍受人们不留下评论就投反对票，我投了反对票，因为这个答案没有解释任何事情，使用jQuery，而OP从未声明他使用它，而且总体上看起来很匆忙。谢谢@w3bMak3r！让我不安的不是否决权，而是正如你所说的，不加评论的否决权让我发疯。是的，我能理解。。我碰巧找到了我认为很好的答案。它让我发疯，因为我喜欢李娜