纯JavaScript模板渲染：点击按钮多次添加表单项的问题

你遇到的这个问题很常见：用innerHTML =会直接覆盖已有内容，而直接给append传HTML字符串又会被当作纯文本插入，没法渲染成DOM元素。下面给你两种实用的解决方案：

方案1：用innerHTML +=实现内容追加 #

这是改动最小的方法，把原来的覆盖式赋值改成追加操作，每次点击都会在现有表单项后面新增一个：

const Item = ({ i }) => ` <div class="additional-guest mb-3"> <hr> <div class="row"> <div class="col-12 col-md"> <div class="form-group"> <label for="name_${i}" class="control-label">Name</label> <input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]"> </div> </div> <div class="col-12 col-md"> <div class="form-group"> <label for="telephone_${i}" class="control-label">Telefonnummer</label> <input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]"> </div> </div> </div> </div> `;
var e = document.getElementsByClassName('additional-guests');
document.getElementById('new-guest-button').addEventListener('click', function(ev) {
    console.log("klick");
    var r = document.getElementsByClassName('additional-guest').length;
    // 替换为 += 实现追加，而非覆盖原有内容
    e[0].innerHTML += [{ i: r }].map(Item).join('');
}, false);

这种方法的优势是简单直接，几乎不需要调整现有代码；如果后续你的表单项需要绑定事件，记得给新增元素重新绑定即可。

方案2：将HTML字符串转为DOM元素再追加（更规范的DOM操作） #

如果想要更严谨地操作DOM（避免innerHTML可能带来的潜在风险，比如XSS，当然你的场景下自身生成的字符串风险极低），可以先把HTML字符串解析成真实DOM元素，再插入到容器中：

const Item = ({ i }) => ` <div class="additional-guest mb-3"> <hr> <div class="row"> <div class="col-12 col-md"> <div class="form-group"> <label for="name_${i}" class="control-label">Name</label> <input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]"> </div> </div> <div class="col-12 col-md"> <div class="form-group"> <label for="telephone_${i}" class="control-label">Telefonnummer</label> <input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]"> </div> </div> </div> </div> `;
// 提前获取目标容器，避免每次点击重复查询DOM
var guestContainer = document.getElementsByClassName('additional-guests')[0]; 
document.getElementById('new-guest-button').addEventListener('click', function(ev) {
    console.log("klick");
    var r = document.getElementsByClassName('additional-guest').length;
    // 创建临时div解析HTML字符串
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = Item({i: r});
    // 将解析后的真实DOM元素追加到目标容器
    guestContainer.appendChild(tempContainer.firstElementChild);
}, false);

这里的思路是借助临时div把HTML字符串转换成DOM节点，再把节点移到目标容器里，确保插入的是可交互的DOM元素而非纯文本。

两种方案都能解决你的问题，你可以根据自己的开发习惯选择。

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