Как использовать объект JSON для генерации HTML-объектов на странице

Question

Я создаю веб-приложение, используя webflow (front-end) и memberstack (back-end).

Чтобы создать список заметок, которые вошедший в систему пользователь может просматривать и удалять-note, у меня есть объект JSON, прикрепленный к каждому пользователю, причем один из параметров внутри этого объекта является 'notes', который сам по себе является объектом, содержащим все заметки с их заголовками и текстами.

Я написалкод, который проходит через каждую из отдельных заметок и копирует div, и заполняет параметры этой отдельной заметки в этом div.

Мне кажется, что мой javascript очень неоптимизирован и что должен быть лучший способ создать html из объекта json.

Это мой код, который создает новую заметку при нажатии кнопки.:

document.querySelector('[yke-action="addNote"]').addEventListener("click", metaAddNote);


function metaAddNote()
{
    MemberStack.onReady.then(async
    function (member)
    {
        var metadata = await member.getMetaData()
        // do stuff with members data
        if (!metadata.notes) metadata.notes = [];

        //new note
        var newNote =
        {
            noteTitle: document.querySelector('[yke-input="noteTitle"]').value,
            nodeText: document.querySelector('[yke-input="noteText"]').value
        }

        //add new notes
        metadata.notes.push(newNote)

        //save notes
        member.updateMetaData(metadata)
        console.log(metadata)
        //! myVar = setTimeout(updatePageOnNotesChange, 300)
        //create a new note block
        //loadAllNotes()

        function createNewNoteBlock()
        {
            var itm = document.getElementById("noteexample").lastChild;
            var cln = itm.cloneNode(true);
            cln.querySelector('[yke-data="noteTitle"]').innerHTML = newNote.noteTitle;
            cln.querySelector('[yke-data="noteText"]').innerHTML = newNote.nodeText;
            cln.querySelector('[yke-action="deleteNote"]').addEventListener("click", metaDeleteNote);
            document.getElementById("notelist").appendChild(cln);
        }
        createNewNoteBlock()
    })
}

И эта функция загружает все заметки при загрузке страницы:

function loadAllNotes()
{
    MemberStack.onReady.then(async
    function (member)
    {
        var metadata = await member.getMetaData()
        // do stuff with members data
        document.querySelector('[yke-data="amountOfNotes"]').innerHTML = metadata.notes.length;

        function aStepFurther()
        {
            if (metadata["level"] === "advanced")
            {
                changeLevelToAdvanced()
            }
            else
            {
                changeLevelToBeginner()
            }
        }

        Object.keys(metadata.notes).forEach(function (key)
        {
            //console.log(key, metadata.notes[key]);
            var itm = document.getElementById("noteexample").lastChild;
            var cln = itm.cloneNode(true);
            cln.querySelector('[yke-data="noteTitle"]').innerHTML = metadata.notes[key].noteTitle;
            cln.querySelector('[yke-data="noteText"]').innerHTML = metadata.notes[key].nodeText;
            cln.querySelector('[yke-action="deleteNote"]').addEventListener("click", metaDeleteNote);
            cln.setAttribute('yke-identifier', key);
            document.getElementById("notelist").appendChild(cln);
        });


    })
}

У меня также есть функция удаления, которая удаляет одну заметку из списка и переменную метаданных /объект.Но чтобы обновить список прямо сейчас, я использую location.reload (), который просто полностью перезагружает все.Есть ли лучший способ обновить список после удаления элемента?

function metaDeleteNote()
{
    var notenumber = this.parentNode.getAttribute("yke-identifier");

    MemberStack.onReady.then(async
    function (member)
    {
        var metadata = await member.getMetaData()
        // do stuff with members data
        metadata.notes.splice(notenumber, 1)

        console.log(metadata)
        await member.updateMetaData(metadata)
        location.reload();
    })

}