myLabel.getAttribute("for");

(where “myLabel” is a reference to a <label> node)
The function always returns NULL, even if the “for” attribute is manually specified into HTML code, ie:

<label for="my_field_id">my label</label>

Fortunately, after a brief search on Google, I’ve found a post on quirksmode.org, which contains a comment by Tino Zijdel, that show an easy and crossbrowser solution to get the “for” attribute (that can be used both to set a value or to get it):

myLabel.htmlFor

Thank you Tino!

In my search I’d even discovered that on Internet Explorer getAttribute() is different from other browsers, because it offers an extra argument called “iFlags” that is a number that can be 0, 1 or 2 (genial!) and means (I’m reporting the official microsoft documentation):

0 -> Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found
1 -> Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in AttributeName must exactly match those in the attribute name. If the iFlags parameter for getAttribute is set to 1 and this option is set to 0 (default), the specified property name might not be found.
2 -> Returns the value exactly as it was set in script or in the source document

It would be a better world without Internet Explorer!

var buffer = [];
var target = document.getElementById("box");

for (var i=0; i<10000; i++) {
    buffer .push(['<p id="node_', i, '" id="node_', i, '">Content ', i, '</p>'].join(""));
}

target.innerHTML = buffer.join("");

This is theoretically the fastest way to manage huge strings and to speed up the building of dynamic content.

It’s been a long time since I used this technique, but today I was doing some tests and I’ve realized that is not obsolete, but somehow inadequate to some modern browsers (Firefox 3, Opera 9 and Google Chrome), due to the worst performance compared to the old and classic string concatenation technique with the plus (+) operator. In my test I’ve compared the time required to concatenate a string built in a 10.000 steps loop with the time required to filling an array, and the amazing result is that, except for internet explorer (for the which buffer technique improve a lot the browser performance) and safari 3, other browser run faster with normal string concatenation with +… even 70/80% faster!
The results are the following:

- String concatenation with +:

• 17000 milliseconds on Internet Explorer 6
• 17000 milliseconds on Internet Explorer 7
• 265 milliseconds on Opera 9
• 125 milliseconds on Firefox 3
• 165 milliseconds on Safari 3
• 50 milliseconds on Google Chrome

- Array based technique:

• 530 milliseconds on Internet Explorer 6 -> -16470 milliseconds (damned good!)
• 470 milliseconds on Internet Explorer 7 -> -16530 milliseconds (damned good!)
• 450 milliseconds on Opera 9 -> +185  milliseconds (very bad!)
  
• 200 milliseconds on Firefox 3 -> +75 milliseconds (bad!)
• 145 milliseconds on Safari 3 -> -20 milliseconds (good)
  
• 95 milliseconds on Google Chrome -> +45 milliseconds (bad)

In conclusion:  if we want to get the best performances from Firefox, Opera and Chrome we have to avoid the array based technique (and use “+” operator instead),  however this technique is still valid if we don’t want to import a browser specific javascript file or branch the code from one browser to another, because it enhance meaningfully the code execution speed of Internet Explorer and decrease in an acceptable manner the execution on other browsers.

$("#myDivID").doMagic({...});

In somehow the jQuery’s function used, annoyed ie6 due to the CSS styles that it applied to the div. After a couple of minutes of debugging, I realized that we should have needed to spend a full day or more to fix the problem at the root (due to the complexity of the page content). So I decided to isolate the problem by using the CSS positioning technique. Fundamentally I put the div (“#myDivID”) into another div with relative position and set the first with an absolute position, in this way:

<div style="position: relative; width: Npx; height: Npx;">
    <div id="myDivID" style="position: absolute; top: 0; left: 0;"></div>
</div>

With this expedient “myDivID” is now “trapped” into the parent div and it can’t influence the others page elements.