"for()" and "var".

[jlizarraga]

Hi all,

Which of the following is a better method of creating and appending elements using a for() loop? (or if I'm missing the mark entirely, please let me know! :P)

var oA = new Array();
for(var i in someObject){
	oA[i] = document.createElement("a");
	oA[i].href = someObject[i].href;
	oA[i].appendChild(document.createTextNode(someObject[i].text));
	someContainer.appendChild(oA[i]);
}

for(var i in someObject){
	(function(){
		var oA = document.createElement("a");
		oA.href = someObject[i].href;
		oA.appendChild(document.createTextNode(someObject[i].text));
		someContainer.appendChild(oA);
	})();
}

Thanks!

[Nile]

The second one. The first one is simply making an array with the key of the keys of sameObject, if you needed to locate that later then I'd use the first one. Although I don't think that you need the selected.

for(var i in someObject){
	(function(){
		var oA = document.createElement("a");
		oA.href = someObject[i].href;
		oA.appendChild(document.createTextNode(someObject[i].text));
		someContainer.appendChild(oA);
	})();
}

[jlizarraga]

Thanks Nile.

[Nile]

Glad to help you jlizarraga.


I was wondering, did you test your code example #2 in your first post?

[jlizarraga]

I didn't test that exact code, but here's something similar I'm using in an app to apply an IE6 hover fix on dynamically created elements. This is the code that prompted this question.

		var oClasses = ["mm3_LargeResult", "mm3_TileResult", "mm3_SmallResult", "mm3_TextOnlyRow"];
		for(var i=0; i<oClasses.length; i++){
			(function(){
				var oElements = YAHOO.util.Dom.getElementsByClassName(oClasses[i]);
				var oHoverClass = oClasses[i] + "_hover";
				for(var j=0; j<oElements.length; j++){
					oElements[j].onmouseover = function(){
						YAHOO.util.Dom.addClass(this, oHoverClass);
					}
					oElements[j].onmouseout = function(){
						YAHOO.util.Dom.removeClass(this, oHoverClass);
					}
				}
			})();
		}

This code is working fine for me but only runs in IE6 (I'm using browser detection for that... is there a feature detection method for determining :hover/:active limitations?). If I take out the self-executing function, it doesn't work, and following my first example for any "var" declarations doesn't work in this case either.

[Twey]

(function(){
  for(var x in someObject) {
    var oA = document.createElement("a");

    oA.href = someObject[x].href;
    oA.appendChild(document.createTextNode(someObject[x].text));
    someContainer.appendChild(oA);
  }
})();

Recreating the function on each iteration is wasteful and pointless (since the iterator variable is still leaked to the outside scope anyway).

[Nile]

Mhhmmm.. I didn't think it would work because your putting it in a function. But since you didn't test it.. Ya never know, huh?

[jscheuer1]

Also though, using the array method (looking back to post #1 in this thread), could have speed advantages should you wish to access the created elements later in a for(var i = 0; i < oA.length; ++i) type loop. That is, if the array were created as a normal javascript array:

var oA = new Array(), num = 0;
for(var i in someObject){
	oA[num] = document.createElement("a");
	oA[num].href = someObject[i].href;
	oA[num].appendChild(document.createTextNode(someObject[i].text));
	someContainer.appendChild(oA[num++]);
}