"Плывет" стиль элемента при его обновлении через jQuery
Делаю сайт на Django + jQuery + AJAX.Мне необходимо обновить информацию внутри элемента HTML страницы. Пробовал через location.reload(), не нравится, что очищается консоль и удаляется лог, который я планирую хранить. Может есть какие-то способы, подгрузить css напрямую в jQuery, либо как-то грамотно обновить элемент, чтобы не "плыли" стили. Cкрипт jQuery:
`$.ajax({
url: url,
type: 'POST',
data: data,
cache: false,
dataType:"json",
success:function(data2) {
console.log("OK2");
console.log(data2.action);
console.log(data2.message);
console.log(data2.history);
$('#info').load(document.URL + ' #info');
$('#turn').load(document.URL + ' #turn');
// location.reload(true);
$('#log').html('<h4>' + data2.history+' </h4>');
if (data2.message.length > 0){
window.alert(data2.message)
if (data2.message === 'game_ended') {
console.log(data2.win_witcher)
if (data2.win_witcher === 'witcher_wins') {
window.location.href = "/endgame?win=0"
}
else {
window.location.href = "/endgame?win=1"
}
console.log("check22")
}
}
},
error: function () {
console.log("error")
console.log("message")
}
})
};`
HTML код обновляемых элементов:
<div class="card-deck mb-3 text-center" id="info">
<div class="card mb-4 shadow-sm" id="witcher">
<div class="card-header">
<h4 class="my-0 font-weight-normal" id="name">{{witcher.name}}</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">{{witcher.level}} <small class="text-muted">уровень</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>{{witcher.hp}}<small class="text-muted" id="witcher_hp"> здоровья </small></li>
<li>{{witcher.attack_power}} <small class="text-muted"> сила атаки </small> </li>
<li>{{witcher.accuracy}}<small class="text-muted"> точность </small></li>
<li>{{witcher.energy}}<small class="text-muted"> энергия </small></li>
<li>{{witcher.shield}}<small class="text-muted"> текущий щит </small></li>
<li>{{witcher.swallow}}<small class="text-muted"> Ласточка </small></li>
<li>{{witcher.thunder}}<small class="text-muted"> Гром </small></li>
<li>{{witcher.tawny_owl}}<small class="text-muted"> Неясыть </small></li>
</ul>
</div>
</div>
{% for el in enemy %}
{% if el.hp > 0 %}
<div class="card mb-4 shadow-sm" id="enemy">
<div class="card-header">
<h4 class="my-0 font-weight-normal">{{el.name}}</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">{{el.level}} <small class="text-muted">уровень</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>{{el.hp}}<small class="text-muted"> здоровья </small></li>
<li>{{el.attack_power}} <small class="text-muted"> сила атаки </small> </li>
<li>{{el.accuracy}}<small class="text-muted"> точность </small></li>
</ul>
</div>
</div>
{% endif %}
{% endfor %}
</div>

