I have a Django template that displays a hierarchy of workers using the django mttp library.

{% extends "base.html" %}
{% load static mptt_tags  %}

{% block content %}
<ul class="root" >
    <button type="button"  id="full-button">Click</button>
    {% recursetree object_list %}
    
        <li>
            {{node.first_name}} {{node.last_name}} {{node.middle_name}}
            {% if not node.is_leaf_node %}
                <ul class="children" id="update">
                        {{ children }} 
                </ul>
            {% endif %}
        </li>
    {% endrecursetree %}
</ul>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{% static "scripts/treeOpen.js" %}"></script>
{% endblock content %}

When the page is first loaded, only the first two levels of the hierarchy are displayed.
The task is to implement lazy loading so that the user clicks on the button and only after that all levels are loaded.

I am trying to do this using Ajax

$(document).ready(function () {
    $('#full-button').click(function (event) {
        console.log("work")
        openFull();
    });

    function openFull() {
        $.ajax({
            url: '/tree/',
            method: 'GET',
            data: { 'full': 1 },
            success: function (data) {
                console.log('success')

                $('.root').html(data);
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log('Error ajax request: ' + errorThrown);
            }
        });
    }
});

and in fact, in the console, I have a success suppression database, that is, ajax works correctly, but the code fragment is not updated correctly.

I have such a problem as on the screen

Please tell me who is more competent in this matter.

I also tried emptying the fragment first with the empty method

   $('.root').empty();

or

   $('.root').html('');
   $('.root').html(data);

but nothing works.