Javascript: document.createElement('') & delete DOMElement

Question

If you create a element within a function like:

function makeDomElement() { var createdElement = document.createElement('textarea'); }

And you do not append it anywhere in the DOM i.e. via .appendChild functions, does it still remain in memory? So would you have to do

function makeDomElement() { var createdElement = document.createElement('textarea'); delete createdElement; }

I'm just curious :)

It should be cleaned up with any other variables in the function's scope. — Rob
– Rob, Commented Dec 4, 2009 at 14:23
only with appendChild you would have to call elem.remove() — milahu
– milahu, Commented Jul 21 at 19:43

AnthonyWJones · Accepted Answer · 2009-12-04 14:28:54Z

It will vary from browser to browser however the javascript delete keyword has nothing to do with the DOM's createElement method. There is no need to use delete.

What will happen is that the reference to the element currently held in the createdElement will get garbage collected. Now in the case of IE that will mean that the element will have its reference count dropped to 0 so it will destroy itself and release its memory. Other browsers do things differently typically the elements in the DOM are themselves garbage collected objects and will be removed during the same (or perhaps a DOM specific) GC cycle.

Had the element been added to the document then in the case of IE there would be another reference added to the element so when the reference in createdElement is removed the element object would still have a non-zero reference count and continue to exist.

In the case of other browsers where the elements themselves are garbage collected the element wouldn't be collected since the collector would see it in the graph of objects connected to the document.

Also, if a function statement were to appear after createElement referring to the element created, it would create a closure around the element. Garbage collection of the element would then become dependent on the function itself being garbage collected, with or without insertion into the document.
@Cresent: Well a reference to the function would have to be placed somewhere outside the currently executing context before a closure would be formed. However the function wouldn't even have to reference the variable containing the element for a circular reference to exist, the very fact that both the variable and the function exist in the same execution context is enough to do that.
If someone does: function makeDomElement() { var DOMifier = document.createElement('div'); DOMifier.innerHTML = "<div onClick='foo()'></div>"; } Will the listener attach and keep this in memory. I have a method that takes in any string (which could contain html) and uses the built in DOM parser to identify just text nodes. However, I don't need to keep the parsed DOM objects. I'm afraid if any string can attach itself back to the DOM then I'll have a leak.

Christoph · Accepted Answer · 2009-12-04 14:32:07Z

After the function terminates, there's no longer any reference to the object, ie if the garbage collector works properly, it should be collected (there's an IE bug that prevents objects with circular references to be collected if DOM nodes are involved).

Also, your code is broken as local variables can't be deleted: trying to do so will even throw a syntax error in strict mode ES5.

Collectives™ on Stack Overflow

Javascript: document.createElement('') & delete DOMElement

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related