使用js循环html代码，并在html代码中使用js变量

Looping hml code using js, and use inthe html code js variables

本文关键字：代码 html js 变量 循环 使用 并在      更新时间：2023-09-26

我有一个html代码，我必须重复很多次，在这些代码块中，只有3部分改变，2个字符串和一个链接到一个图像。

我的问题是，如果我可以使用js循环来重复html代码，使用js数组或两个不同的js变量改变这3部分，所以我不必写html 200次。

谢谢。

这是代码html块，我想改变的3部分是，STRING1, STRING2和IMAGE LINK。

<li class="item-thumbs span3 STRING1 ">
  <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="STRING2" href="IMAGE LINK">
</li>

Thank you 

var htmlInsert = "",
    documentNode = document.getElementById('someDiv');
someArray.forEach( function( item, index ) {
    htmlInsert+= '<li class="item-thumbs span3' + item.STRING1 + '"> <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="' + item.STRING2 + '" href="' + item.STRING3 + '"></li>'
};
someDiv.innerHTML = htmlInsert;

var html = "";
for(var i = 0; i < your_data.length; i++){
    html += '<li class="item-thumbs span3' + your_data[i].STRING1 + '"> <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="' + your_data[i].STRING2 + '" href="' + your_data[i].STRING3 + '"></li>';
}
console.log(html);  //this is what you want
相关文章：