js и элементы на странице

Всем привет. Прошу помощи. Пишу на python, js вижу 3 раз в жизни. Есть 2 функции, кот кое-как сам написал на js прямо в html.Они получаю данные из модели и отображают на страницу. По итогу, при переходе на страницу, выводится 100 позиций из бд. Понимание фронта на уровне бутстрапа(

function getPage(offset, limit) {
    // получает страничку по параметрым
    var xhr = new XMLHttpRequest()
    xhr.open(
        'GET',
        'http://localhost:8000/books?offset=1&limit=100'
    )
    xhr.send()
    xhr.onload = function() {
        if (xhr.status == 200) {
            render(JSON.parse(xhr.response))
        }
    }
}

getPage(1, 5)

function render(books) {
    // добавлфет э-ты на стр из букс
    for (var i = 0; i < books.length; i++) {
       var item = document.createElement('div');
       item.classList = ['book']
       item.innerText = 'title: ' + books[i]['title'];
       document.getElementById('content').appendChild(item);
    }
}

выводится шаблонные данные

    title: some title 1
    title: some title 2
    title: some title 3
    title: some title 4
    и т. д.

Как я могу обращаться к этим данным, чтобы использовать их, к примеру для оформления? В той же django (через контекст во вью) я мог, используя jinja обращаться к этим данным, но у меня сам js в html выводит весь список данных. Мне нужно как-то примитивно оформить, используя эти данные.

Читаю сейчас про прокрутка, не понятно, как ее реализовать, сейчас у меня на страницу выводится сразу 100 позиций, а мне нужно сделать так, чтобы они выводились динамически, то есть по мере того, как пользователь листает вниз они загружались, показывая какой-н. простой прелоадер. Как это сделать? Читаю здесь https://learn.javascript.ru/onscroll.