I think that by when you are saying refresh, this function is being called on each update. So each time you run it, it goes like this:
<div id="history_list">
<ul><li>Item 1</li></ul>
</div>
To:
<div id="history_list">
<ul><li>Item 1</li></ul>
<ul><li>Item 1</li><li>Item 2</li></ul>
</div>
What may need to happen is to remove the previous list, before you append the new list to the div, like this:
var ul = document.createElement('ul');
var list = document.getElementById('history_list');
//Cleans the list
while(list.firstChild) {
list.removeChild(list.firstChild);
}
list.append(ul)
//Rest as normal
I would not recommend using innerHTML to add the text, as that may leave you open to a XSS attack. You should prefer to use the element methods and properties to construct the link. Also to validate it, as someone could put href="javascript:alert("hi")" as a link.