Should there be an element "cleared" before setting innerHtml?

Question

I saw several times in the project I'm working on, before setting the innerHtml element, the value is cleared before that, for example:

var foo = document.getElementById('foo') foo.innerHTML = ''; foo.innerHTML = '<span>Bar</span>' 

I can’t find a good reason for this, simply because everyone in the team follows this “practice”. As far as I understand, anyone can override the innerHtml property to perform an individual action, but besides this reason, is there another that I am missing?

Thanks!

EDIT: Updated code to avoid skewing (thanks @freefaller)

Answer 1

It seems that at some point the project saw some kind of load-cult programming .

Not only is there no reason to set the .innerHTML property twice, but it actually slows down the page unnecessarily. Each modification made to the DOM causes the browser to stop and update the document tree, which means loops are lost every time .innerHTML is set to an empty line.