使用Javascript生成html

我有一个画廊页面，经常更新新的图像。我使用简单的HTML来发布照片。我目前的过程是复制并粘贴照片的标签集，并更改编号以与图像文件名相对应。我把号码从047改为048。复制粘贴，将其更改为049。这会一直持续下去，直到我有了更多的照片。正如你所看到的，这是非常低效的，必须有一个更好的方法来做到这一点。我想知道是否有一种更简单的方法可以用Javascript实现这一点？也许通过输入特定的数字或范围来生成额外的标记

欢迎任何能使此过程高效的想法！谢谢大家!

<div class="cbp-item trim">
          <a href="../assets/images/trim/img-trim-047.jpg" class="cbp-caption cbp-lightbox" data-title="">
              <div class="cbp-caption-defaultWrap">
                  <img src="../assets/images/trim/img-trim-047.jpg" alt="">
              </div>
          </a>
      </div>

---

这将帮助您以编程方式创建它：

var new_row = document.createElement('div');
new_row.className = "cbp-item trim";
var a = document.createElement('a');
a.href = "../assets/images/trim/img-trim-047.jpg";
a.className= "cbp-caption cbp-lightbox";
document.body.appendChild(a);
var div = document.createElement('div');
div.className = "cbp-caption-defaultWrap";
var img = document.createElement('img');
img.src= "../assets/images/trim/img-trim-047.jpg";
div.appendChild(img);
a.appendChild(div);
new_row.appendChild(a);

---

如果只是打印HTML，我建议您使用Sublime文本编辑器之类的插件

当您安装这个插件并了解它的工作原理时，您可以简单地创建一个复杂的html，而“for”循环可以做到这一点。这将帮助您仅更改每个项目的图像/链接编号

---

查看我添加的链接中的演示。

下面是一个Java脚本示例，它将生成您需要的html。将总数设置为生成所需图像数量所需的任何数字

var总计=47；
var hook=document.getElementById（'hook'）；
//幻灯片放映的主节点
var节点=document.createElement（'div'）；
node.classList=“cbp项目修剪”；
//算出正确的数字
var n=函数（int）{
var length=int.toString（）.length；
返回长度===1
？00'+int
：长度===2
？0'+int
：长度
}
//创建项目
var createItem=函数（int）{
//创建锚
var a=document.createElement（'a'）；
a、 href='../assets/images/trim/img trim-'+（n（int））+'.jpg“class=“cbp caption cbp lightbox”；
a、 类列表='cbp标题cbp灯箱'；
//创建Div
var div=document.createElement（'div'）；
div.classList='cbp caption defaultWrap'；
//创造形象
var img=document.createElement（'img'）；
img.src='../assets/images/trim/img trim-'+（n（int））+'.jpg'；
img.alt=‘画廊图片’；
//确定Dom节点
var container=div.appendChild（img）
a、 儿童组;；
//返回最终项目
归还
}
//创建项目
对于（变量i=1；i
您可以使用模板解决方案。有几个库可以实现这一点，但您也可以自己实现它

有一种方法可以做到这一点：


将一个图像的HTML放入具有非标准
语言
属性的
脚本
标记中，以便浏览器忽略它

在里面放一些你想替换的关键字，例如
{url}
。你可以发明自己的语法
将该模板读入变量
在JS代码中，将所有图像的URL放入字符串数组中
对于该数组中的每个元素，用该特定URL替换模板字符串中的关键字，并连接所有这些生成的HTML片段
将生成的HTML注入文档中的适当位置

下面是一个这样做的片段：


//在此处添加新图像：
变量图像=[
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/330px-SNice.svg.png",
"https://nettemarie357.files.wordpress.com/2014/09/smiley-face.jpg?w=74&h=74",
];
//加载模板HTML
var template=document.querySelector（'script[language=“text/template”]”）。innerHTML；
//使用模板插入所有图像：
container.innerHTML=images.map（url=>template.replace（/{url}/g，url））.join（“”）
img{最大宽度：50px}
我建议您使用服务器端脚本（例如PHP）。如果这是不可能的，请查看JavaScript中的DOM。或者，使用一个相当容易编写的工具自动生成HTML文件。