如何在JavaScript的insertAdjacentHTML模板中实现多变量替换？

核心问题是你没利用forEach的索引参数关联两个数组的对应元素，同时模板里的<img>标签存在未闭合的语法问题，先修正这两点：

const images = ["images/1.png", "images/2.png", "images/3.png"];
const text = ["txt1", "txt2","txt3", "txt4"];

const target = document.querySelector(".image-grid");
// 修复img标签的闭合问题，避免HTML结构错误
const template = "<div><label class=\"image-container\"><img src=\"~id~\" /></label><div class=\"share-tray\"><a href=\"https://twitter.com/intent/tweet?text=~txtid~\"><i class=\"fab fa-twitter\"></i></a></div></div>";

// 使用forEach的第二个参数index获取当前元素的索引
images.forEach(function(item, index) {
    // 先获取对应索引的文本，若超出text数组长度则用默认值或空字符串
    const correspondingText = text[index] || "";
    // 依次替换模板中的两个占位符
    const finalHtml = template.replace(/~id~/g, item).replace(/~txtid~/g, correspondingText);
    target.insertAdjacentHTML("beforeend", finalHtml);
});

关键说明： #

• 索引关联：forEach的第二个参数index会返回当前元素在images数组中的位置，用这个位置去text数组里取对应元素，就能实现两个数组的一一匹配
• 模板修正：原代码里的<img src="~id~"没有闭合，会导致后续HTML结构错乱，必须补上/>
• 边界处理：如果images和text数组长度不一致（比如你这里images有3个，text有4个），用text[index] || ""避免出现undefined，也可以根据需求改成其他默认文本
• 多替换顺序：先替换图片路径还是文本内容不影响结果，只要两次replace都执行即可

内容的提问来源于stack exchange，提问作者HolyUnicow