Question

I have a script that asynchronously loads image src from XML file.
The sources are later assigned to the background of a div, and backgrounds change every 5 seconds.
It works well, but I want to pre-load the actual images to display already loaded image.
I do this by iterating an array, creating an img for each source:

for(var i=0; i < clientLogos.lenght; i++){
    var imgHolder = document.createElements("IMG");
    imgHolder.src = clientLogos[i];
}

It’s hard to tell the difference if it has been preloaded in development stage, so my question is:
If I delete or over-write the variable containing the element I just created, does the element stay in DOM, or does it get deleted as well?

I’m pretty sure it stays, but I want to ask the more experienced developers.

I got confused with it:
Does document.createElement() inserts it in the DOM or not?

Answer 1

Yes. The newly created element will stay in the DOM unless you explicitly remove it or you overwrite the .innerHTML property of some parent node.

when deleting (“nulling”) imgHolder you are only deleting a reference to that node.