Javascript table refresh no jquery

Question

I am doing javascript without jquery implementation. Currently I am populating a table and want to refresh it when a new data in added without reloading the new page. As of now the refreshing works but it keep creating new table. How do I achieve refreshing on the table itself, without keep adding new table?

Fiddle

Code

var schedule = [
{ date: "Monday, 9:00am", team1: "Chasing", team1Score: "13", team2: "Amsterdam Money Gang", team2Score: "9"},
{ date: "Monday, 9:00am", team1: "Boomsquad", team1Score: "15", team2: "Beast Amsterdam", team2Score: "11"},
];

function run(){    
var len = schedule.length;
var table = document.getElementById('table1');

for (var i=0; i < len; i++) {
    var tr = document.createElement('tr');
    var s = schedule[i];

    var td = document.createElement('td');
    td.innerHTML = s.date;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team1;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team1Score;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team2;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team2Score;
    tr.appendChild(td);

    table.appendChild(tr);
}}

setInterval(function(){
    run() // this will run after every 5 seconds
}, 2000);

Answer 1

If you inspect your page in development mode(by pressing F12) than you can see that there is no new table is adding, actually what are you doing is that you first get the table and after that you are starting to adding new rows to it but the table is also have the old rows. so that's why you are seeing the same rows multiple times. To overcome this problem first you have to clear the table.

You are also get the tables every time but there is no need to that, by doing that you are simple increase the load on the browser because JavaScript every time traverses to you each and every DOM to find your ID.

Simply made the below changes to overcome this problem.

var table = document.getElementById('table1');

var schedule = [
{ date: "Monday, 9:00am", team1: "Chasing", team1Score: "13", team2: "Amsterdam Money Gang", team2Score: "9"},
{ date: "Monday, 9:00am", team1: "Boomsquad", team1Score: "15", team2: "Beast Amsterdam", team2Score: "11"},
];

function run(){    
var len = schedule.length;
table.innerHTML="";

for (var i=0; i < len; i++) {
    var tr = document.createElement('tr');
    var s = schedule[i];

    var td = document.createElement('td');
    td.innerHTML = s.date;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team1;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team1Score;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team2;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = s.team2Score;
    tr.appendChild(td);

    table.appendChild(tr);
}}

setInterval(function(){
    run() // this will run after every 5 seconds
}, 2000);

Happy Coding...