使用纯JavaScript的动态Django inline_formset

d7v8vwbk  于 2023-06-25  发布在  Go
关注(0)|答案(1)|浏览(136)

我在用javascript搜索django inline_formset的工作示例,发现了这篇文章Add a dynamic form to a django formset using javascript in a right way。在这个过程中,我试图将Jquery部分转换为纯javascript?我试过了

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);
    
    $('#item-images').append(compiledTmpl); // how to convert this to pure javascript?

    // update form count
    document.querySelector('#id_images-TOTAL_FORMS').setAttribute('value', count + 1);
})

这是可行的,但仍然有这个jquery代码$('#item-images').append(compiledTmpl),我试图将其更改为document.querySelector('#item-images').append(compiledTmpl),但最终结果将是一个html标签字符串,而不是添加的新表单。

jecbmhm3

jecbmhm31#

使用一个表的insertRow()方法实现了这一点。

let newRow = itemContainer.insertRow(itemContainer.rows.length);
    newRow.outerHTML = compiledTmpl;

相关问题