javascript - How to dynamically create HTMLElement and update innerHTML using window.setInterval -

i created following script countdown clock. want dynamically create htmlelement (span) , update innerhtml using window.setinterval; problem updating current date without creating new group of spans.

this code:

var countdownclock; (function (countdownclock) {     var countdown = (function () {         function countdown(id, enddate, message) {             this.id = id;             this.enddate = enddate;             this.message = message;         }         countdown.appendchildelement = function (domnode, tagname) {             var child = document.createelement(tagname);             domnode.appendchild(child);             return child;         };         countdown.prototype.gettimeremaining = function (enddate) {             var t = date.parse(enddate) - date.parse(new date().tostring());             var seconds = math.floor((t / 1000) % 60);             var minutes = math.floor((t / 1000 / 60) % 60);             var hours = math.floor((t / (1000 * 60 * 60)) % 24);             var days = math.floor(t / (1000 * 60 * 60 * 24));             return {                 'total': t,                 'days': days,                 'hours': hours,                 'minutes': minutes,                 'seconds': seconds             };         };         countdown.prototype.drawcountdown = function (id, enddate) {             var container = document.getelementbyid(id);             var timeremaining = this.gettimeremaining(enddate);             var update = function () {                 (var key in timeremaining) {                     if (timeremaining.hasownproperty(key)) {                         var span = countdown.appendchildelement(container, 'span');                         span.setattribute('class', key);                         span.innerhtml = timeremaining[key];                     }                 }             };             return update();         };         countdown.prototype.initialize = function () {             var = this;             this.drawcountdown(that.id, that.enddate);             var update = setinterval((function () {                 that.drawcountdown(that.id, that.enddate);             }), 1000);             // var updatecountdown = setinterval(             //     (function() {             //         that.initializecountdown(that.id, that.enddate, that.message)             //     }), 1000);         };         return countdown;     })();     countdownclock.countdown = countdown; })(countdownclock || (countdownclock = {})); 

jsfiddle

create function remove old span

https://jsfiddle.net/7vjf4y5u/1/

i added below function countdowntimer prototype

/* add method remove old span*/ countdown.prototype.removespan = function(){     if(this.span){         this.span.remove();   } }; 

and updated below function call after creating new span

countdown.prototype.drawcountdown = function(id, enddate) {   var self = this; //added reference in update function   var container = document.getelementbyid(id);   var timeremaining = this.gettimeremaining(enddate);   var update = function() {     (var key in timeremaining) {       if (timeremaining.hasownproperty(key)) {         var span = countdown.appendchildelement(container, 'span');         span.setattribute('class', key);         span.innerhtml = timeremaining[key];         self.removespan(); //remove old span         self.span = span; //set new span       }     }   };   return update(); }; 

if don't want make new span each time, keep reference span , update innerhtml

https://jsfiddle.net/s3yzlvee/1/

countdown.prototype.drawcountdown = function(id, enddate) {   var self = this;   var container = document.getelementbyid(id);   var timeremaining = this.gettimeremaining(enddate);   var update = function() {     (var key in timeremaining) {       if (timeremaining.hasownproperty(key)) {         /* save reference span*/         if(!self.span){             self.span = countdown.appendchildelement(container, 'span');         }          //operate on referenced span         self.span.setattribute('class', key);         self.span.innerhtml = timeremaining[key];       }     }   };   return update(); };