如何将Django inline_formset的jQuery代码转为纯JS实现动态表单添加

问题核心：jQuery的append()方法会自动将HTML字符串解析为DOM元素后插入，但原生JavaScript的Element.append()如果直接传入字符串，会将其作为纯文本节点插入，导致HTML标签被原样显示。

可行的解决方案 #

方法1：使用insertAdjacentHTML（推荐）

这个方法可以直接将HTML字符串解析为DOM元素，并插入到指定位置，效果和jQuery的append()完全一致，且不会影响容器内已有的DOM元素和事件绑定：

document.querySelector('#item-images').insertAdjacentHTML('beforeend', compiledTmpl);

方法2：使用innerHTML追加

通过直接拼接容器的innerHTML来添加新表单，实现简单，但如果容器内已有绑定事件的元素，重新渲染会丢失事件绑定：

document.querySelector('#item-images').innerHTML += compiledTmpl;

方法3：手动解析HTML为DOM元素

使用DOMParser将字符串转为DOM片段，适合需要对插入的表单元素做额外操作的场景：

const parser = new DOMParser();
const doc = parser.parseFromString(compiledTmpl, 'text/html');
const newForm = doc.body.firstElementChild;
document.querySelector('#item-images').append(newForm);

修改后的完整代码（以insertAdjacentHTML为例） #

const btnAddMoreImg = document.querySelector('#add-image-button');
btnAddMoreImg.addEventListener('click', (evt) => {
    evt.preventDefault();
    let count = document.querySelector('#item-images').children.length;
    let tmplMarkup = document.querySelector('#images-template').innerHTML;
    let compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
    
    // 替换jQuery append的核心代码
    document.querySelector('#item-images').insertAdjacentHTML('beforeend', compiledTmpl);

    // 更新表单计数
    document.querySelector('#id_images-TOTAL_FORMS').setAttribute('value', count + 1);
})

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