Dynamic django inline_formset using pure javascript

Question

I was searching on working examples for django inline_formset with javascript and found this post Add a dynamic form to a django formset using javascript in a right way. In the process, I tried to convert the Jquery portion into pure javascript? I have tried

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);
})

This works but there is still this jquery code $('#item-images').append(compiledTmpl) which I tried to change to document.querySelector('#item-images').append(compiledTmpl), but the end result would be a string of html tags instead of a new form added.

Answer 1

Got this working using the insertRow() method of a table.

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