How to show my pagination bootstrap inside a div in HTML, That acts in JavaScript function?

I want to add pagination bootstrap to my show-posts Div, but because on my JavaScript function I Have

document.querySelector('#show-posts').innerHTML = "" - it doesn't show my bootstrap

How can I show my bootstrap pagination and also reset the innerHTML of shows-posts every time?

index.js

function load_posts(){
  document.querySelector('#page-view').style.display = 'none';
  document.querySelector('#load-profile').style.display = 'none';
  document.querySelector('#posts-view').style.display = 'block';
  document.querySelector('#show-posts').style.display = 'block';
  document.querySelector('#post-form').onsubmit = function() {
        compose_post();
    }
    fetch('/posts/all_posts') // url with that API
    .then(response => response.json())
    .then(all_posts => {
        // Loop and show all the posts.
        console.log(all_posts)
        all_posts.forEach(function(post) { // loop to loop over each object
            build_post(post)
        });
    });
document.querySelector('#show-posts').innerHTML = ""
}

HTML

<div id ="show-posts">
    <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
</div>

views.py

def show_posts(request):
    all_posts = NewPost.objects.all()
    all_posts = all_posts.order_by("-date_added").all()
    paginator = Paginator(all_posts, 5)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    return JsonResponse([website_post.serialize() for website_post in page_obj], safe=False)