javascriptinsertadjacenthtml

InsertAdjacentHTML, element saves after refresh

I am able to add the elements I want, but after I refresh they disappear. How can I get the elements to save permanently while using insertAdjacementHTML or do I need to use another method?

Sample code:

function itemAdder () {
    var header = document.querySelector(".list-group");
    header.insertAdjacentHTML("beforeend", '<a>Item 1</a>')
};

document.getElementById("circle-add").addEventListener("click", itemAdder)
Solution

  • Every time an item is added, you might save the container's current innerHTML in localStorage, and on page load, if anything exists in localStorage, populate the container with whatever's stored:

    var header = document.querySelector(".list-group");
if (localStorage.headerHTML) header.innerHTML = localStorage.headerHTML;

function itemAdder () {
    header.insertAdjacentHTML("beforeend", '<a>Item 1</a>')
    localStorage.headerHTML = header.innerHTML;
}

document.getElementById("circle-add").addEventListener("click", itemAdder)

    (hopefully you have a way to delete items as well - on deletion, use the same line localStorage.headerHTML = header.innerHTML; to save the HTML again)