Как функционально заполнить HTML JSON

Я пытаюсь понять подход функционального программирования. Насколько я понимаю, это в основном инкапсуляция всего в функции и их передача. Теперь для моего примера я пытаюсь загрузить данные из RESTApi и отобразить их в DOM:

const storyElement = function (): HTMLElement {
    const div = document.createElement('div');
    div.className = 'stories';
    return div;
};

const spinnerElement = function (): HTMLElement {
    const div = document.createElement('div');
    div.className = 'spinner';
    div.innerHTML = `<svg class = "spinner" viewBox = "0 0 100 100" width = "20" height = "20">
                        <circle cx = "50" cy = "50" r = "42" transform = "rotate(-90,50,50)" />
                    </svg>`;
    return div;
};

У меня есть два блока: один для историй и один для значка загрузки. Если содержимое отображается, значок должен исчезнуть.

function getAllStories(callback): void {
    makeRequest(baseUrl(), (res) => spawn(res, callback));
}

function spawn(content, callback): void {
    content = JSON.parse(content);

    if (content instanceof Array === false) {
        content = [content];
    }

    content.forEach(elm =>
        storyElement().innerHTML += `<h1>${elm.title}</h1>
                                     <div class = "story-info">
                                        <i>ID: Post-${elm.id}</i>
                                     </div>
                                     <p>${elm.body}.</p>`
    );
    console.info(content);
    callback();
}

function displayFinished(): void {
    spinnerElement().style.display = 'none';
    document.body.innerHTML += '<div>All done!</div>';
}

Теперь, когда я выполняю getAllStories, консоль выводит результат, но содержимое не отображается в DOM:

document.body.appendChild(storyElement());
document.body.appendChild(spinnerElement());

getAllStories(displayFinished);

Кто-нибудь знает, почему?