Всем привет, прошу подсказать решение следующей проблемы: на странице есть кнопка с классом class="loadBtn" при нажатии на которую через ajax добавляются данные. Вьюха отдает данные следующим образом
return render(request, 'results.html', {'data': data})
код шаблона results:
<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>
то есть вместе данными добавляется кнопка с таким же классом, при нажатии на которую запрашивается следующая порция данных.
Проблема в следующем: сейчас пришедший ответ добавляется на страницу с помощью
document.getElementById(result_form).innerHTML = response;
В результате получается что, как я понял, добавляется просто текст и кнопка не появляется в DOM, соответственно при нажатии на нее не срабатывает отправка данных ajax.
Как можно добавить html чтобы при этом обновился DOM, пробовал вместо innerHTML append - тогда почему-то не распознаются теги, добавляется текст как он есть.
