Save items to dom using insertadjacentHTML

Question

I am currently making a small to do list application. I am adding new to-do items using insertadjacentHTML (as shown below), but after refresh they disappear. What would be the best way to save these items to the DOM permanently. I plan on using MongoDB to give the to do item data, can I save/delete them the DOM using mongo?

 var html = '<div class="added-item">%description%</div>';
    var newHTML = html.replace ("%description%", inputValue.value);
    inputField.insertAdjacentHTML('afterend', newHTML);