[Javascript]: Does Elements created using CreateElement method, cause memory leak, if not removed properly?

Question

I create elements using createElement method, and append it to some parent element. Later on, I clear the innerHTML of the parent element. Will this cause memory leak ? what happens to the element that was created ? If this is a memory leak, how to handle it?. also, if there is any callback function attached to the element, does it need to be detached ?

var spanelem = document.createElement('span');
spanelem.onclick = function(){
CallMe();
};
var parentdiv = document.getElementById('ParentCnt');
parentdiv.appendChild(spanelem);
.....

.....
parentdiv.innerHTML = " "; //is this memory Leak ? what happens to spanelem?

Answer 1

It depends.

If you have code you give - spanElem still exists in memory ( if var spanelem was in global scope, and you didn't execute spanelem = null ), cause there is accessible reference to object.

Otherwise if spanElem has the only reference from it's onClick handler - it will be memory leak only in IE8-. All modern browsers handle such cases and clean memory on garbage collection.

I suppose you mean not right the same code, but just principle -- in such case you can check if there are no other handlers which have link to spanElem in their lexical env, if so - you can just clear reference with adding

spanelem = null;

after

parentdiv.appendChild(spanelem);

Check more details at MDN

P.S. if you run next code

var spanelem = document.createElement('span');
spanelem.onclick = function(){
CallMe();
};
var parentdiv = document.getElementById('ParentCnt');
parentdiv.appendChild(spanelem);

parentdiv.innerHTML = '';

console.log(spanelem);

you'll find that spanelem still exists ( it will be the same, if you'll run setTimeout(function(){ console.log(spanelem); }, 9999); // some huge delay here ) - but the only reason is that for code below we save reference for spanelem object so gc doesn't remove object. If we won't use it - gc will remove object on it's running