Django как добавить html стиль для кнопки javascipt loadmore?

Я добавил кнопку "Загрузить еще" с помощью JavaScript на страницу моего блога, которая будет динамически загружать содержимое. Но я не знаю, как применить мой оригинальный html стиль к кнопке JavaScript load more.

Это мой оригинальный стиль html:

 {% for filt in object_list  %}    
                                    
                        <div class="card mb-4">
                        {% if  not filt.blog_cover_image %}
                            <img class="img-fluid rounded"  style="max-height:1000px;max-width:1200px;"  src="https://via.placeholder.com/900x300" alt="..." />
                       {% else %}
                             
                         <img class="img-fluid rounded"  style="max-height:1000px;max-width:1200px;" src="{{ filt.blog_cover_image.url }}" alt="..." />
                             
                       {%endif%}
                            <div class="card-body">
                                <h2 class="card-title"><a href="{% url 'blog:blog-detail' filt.slug %}">{{filt.title}}</a></h2>
                                <p class="card-text">{{filt.body|striptags|safe|slice:":250" }}</p>
                                <a class="btn btn-primary" href="{% url 'blog:blog-detail' filt.slug %}">Read More →</a>
                            </div>
                            <div class="card-footer text-muted">
                                Posted on ({{filt.created_at}})
                                <div class="author">{{filt.author.first_name}}&nbsp{{filt.author.last_name}}&nbsp;{% if user.is_authenticated  %}{% if user.id == blog.author.id or user.is_superuser %}<a href="{% url 'blog:blog-update' filt.slug  %}"><b>(Edit Blog)</b></a>&nbsp;<a href="{% url 'blog:blog-delete' filt.slug %}"><b>(Delete Blog)</b></a>{% endif %}{% endif %}</div>
                            </div>
                        </div>
{% endfor %}

<----javascript load more html--->
<div id="posts-box"></div>
    <div id="spinner-box" class="not-visible">
        <div class="spinner-border text-primary" role="status"></div>
    </div>
    <div id="loading-box">
        <button class="btn btn-primary" id="load-btn">Load more</button>
    </div>

вот мой код javascript:

const postsBox = document.getElementById('posts-box')
console.log(postsBox)
const spinnerBox = document.getElementById('spinner-box')
const loadBtn = document.getElementById('load-btn')
const loadBox = document.getElementById('loading-box')
let visible = 3 

const handleGetData = () => {
    $.ajax({
        type: 'GET',
        url: `/posts-json/${visible}/`,
        success: function(response){
            maxSize = response.max
            const data = response.data
            spinnerBox.classList.remove('not-visible')
            setTimeout(()=>{
                spinnerBox.classList.add('not-visible')
                data.map(post=>{
                    console.log(post.id)
                    postsBox.innerHTML += `<div class="card mb-4">
                                               
                                                ${post.title}
                                                <br>
                                                ${post.body}
                                            </div>`
                })
                if(maxSize){
                    console.log('done')
                    loadBox.innerHTML = "<h4>No more posts to load</h4>"
                }
            }, 500)
        },
        error: function(error){
            console.log(error)
        }
    })
}

handleGetData()

loadBtn.addEventListener('click', ()=>{
    visible += 3
    handleGetData()
})

как внедрить мой оригинальный html стиль в мой новый JavaScript код?

Вернуться на верх