How to add html using ajax jQuery?

Question

JavaScript

Hello everyone, I ask you to suggest a solution to the following problem: the page has a button with the class class = "loadBtn" when clicked, data is added via ajax. The view gives the data as follows

return render(request, 'results.html', {'data': data})

results template code:

<table>
    <thead>
        <tr>
            <th>Наименование</th><th>Описание</th><th>Цена</th>
        </tr>
    </thead>
    <tbody>
        
        {% for product in data.products %}
            <tr>
                <th>{{ product.product_name }}</th>
                <th>{{ product.product_descript }}</th>
                <th>{{ product.product_price }}</th>
            </tr>
        {% endfor %}
            
    </tbody>
</table>
<form action="" method="get">
    <input type="hidden" name="start_url" value="{{ data.next_url }}">
    <input type="submit" value="Загрузить следующую страницу" class='loadBtn'>
</form>

that is, a button with the same class is added along with the data, when clicked, the next piece of data is requested.
The problem is this: now the incoming response is added to the page with

document.getElementById(result_form).innerHTML = response;

As a result, it turns out that, as I understand it, just text is added and the button does not appear in the DOM, so when you click on it, ajax data is not sent.
How can I add html so that the DOM is updated at the same time, I tried append instead of innerHTML - then for some reason the tags are not recognized, the text is added as it is.

Answer 1

Just replace:
On the:
$('#'+result_form).html(response);