Замена html-веб-страницы на ajax-возврат данных на Django 3.2

Мне удалось использовать ajax для изменения содержимого моей веб-страницы без ее обновления, но единственная проблема заключается в том, что я не могу заменить старое содержимое новым, которое я возвращаю, когда я делаю consol.log (data ) у меня есть новый html, но я не могу изменить его для пользователя

Ajax для отправки формы

<script>
         $(function() {
    $("#show_type").submit(function(event) {
        // Stop form from submitting normally
        event.preventDefault();
        let friendForm = $(this);
        // Send the data using post
        let posting = $.post( friendForm.attr('action'), friendForm.serialize() );
        // if success:
        posting.done(function(data) {
            console.log(data) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< new html
            window.alert("success action");
            // success actions, maybe change submit button to 'friend added' or whatever
        });
        // if failure:
        posting.fail(function(data) {
            window.alert("fail action");
            // 4xx or 5xx response, alert user about failure
        });
    });
});
      </script>

Google chrome новый html в журнале консоли: это html, который я хочу отобразить в браузере, но не знаю как

<div class="grid-container">
         
         <div class="grid-item" start_at="10 août 2021 12:46" end_at="10 août 2021 17:45">
            <span class="device-title">Dispositif nostart [ID]: C23</span>
            <div class="device-info">
               <span class="left-text-icon map">Lieu: HIDE</span>
               <span class="left-text-icon start">Début: 10 août 2021 12:46</span>
               <span class="left-text-icon end">Fin: 10 août 2021 17:45</span>
               <span class="left-text-icon chief-go">Chef GO: cdcd chieffunc</span>
               <span class="left-text-icon dchief-go">Adjoin-Chef GO: did azda</span>
               <span class="left-text-icon dso">DSO: Souris azd</span>
               <div class="resume">
                   <div class="resume title">Résumé des unités</div>
                   <div class="resume content left-resume-icon hurt">bléssés 0</div>
                   <div class="resume content left-resume-icon arrest">interpellations</div>
                   <div class="resume content left-resume-icon grenade">grenades tirées</div>
                   <div class="resume content left-resume-icon water">litres d’eau tirés</div>
                   <div class="resume content">UUID </div>
               </div>
            </div>
        <form action="/home/delete_device/9/" method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="HIDE">
            <input type="submit" value="Delete device">
         </form>
      </div>
      
</div>

спасибо за помощь!

$("div.grid-container").replaceWith(data);