innerHTML is commonly used property for setting html content of elements. Though it is not a standard property, even then all browsers support it. It is faster then using DOM methods like createElement and appendChild.

You can use it to set html for almost all elements. In internet explorer there are some exceptions. You cannot set innerHTML for elements of a table and select box.

Recently a reader asked me the workaround for setting options inside a select box with the help of javascript or jQuery. In this post I will explain some methods which you can use as an alternate to innerHTML.

Here is a html select box.

<select id="selectBox">
</select>

Now let us look at various options available to us.

Using innerHTML

This is the problem. This method will work in all browsers except IE (i have tested till IE8).

var select = document.getElementById('selectBox');
var options = '<option>option 1</option>';
options+= '<option>option 2</option>';
options+= '<option>option 3</option>';
select.innerHTML = options;

Using DOM – Works in all browsers

var select = document.getElementById('selectBox');
for(var i=0; i<3; i++)
{
	var option = document.createElement('option');
	option.appendChild(document.createTextNode('option' + i));
	select.appendChild(option);
}

Using jQuery

Method 1- This will work in all browsers.

$('#selectBox').append('<option>an option</option>');
$('#selectBox').append('<option>another option</option>');
$('#selectBox').append('<option>yet another option</option>');

append method appends the html at the end of an element.

Using jQuery

Method 2 – This will also work in all browsers.

var options = '<option>option 1</option>';
options+= '<option>option 2</option>';
options+= '<option>option 3</option>';
$('#selectBox').html(options);

html() method in jQuery can be thought of as a counterpart of the innerHTML property.

That is all folks. Hope it helps you. If you know of any other technique, do let me know in comments.

Being a web developer there are some tools which I need and use on daily basis. Here are 5 such addons I think every web developer should install on their firefox.

1- Web developer toolbar

Home: http://chrispederick.com/work/web-developer/

Install: https://addons.mozilla.org/en-US/firefox/addon/60

This addon adds a toolbar and a menu to firefox. The toolbar contains several mini tools in it to perform various tasks. It has 11 built in menus for different tasks like cookies, css, forms, html, images and many others. You can read a review of web developer toolbar here.

2- JSONView

Home: http://benhollis.net/blog/2009/02/24/jsonview-view-json-documents-in-firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/10869

JSON is becoming more popular day by day as a data exchange format. JSONView allows you to view json documents in the browser itself without having to open in any text editor and format it. Local files can also be seen if they have .json extension. It formats the document nicely and also provides options to collapse/expand nodes too (just like XML).
In case of invalid json it reports an error.

3- Fireftp

Home: http://fireftp.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/684

You will not have to open a separate ftp client if you use this. To open Fire FTP, go to Tools -> Fire FTP on firefox menu bar. It opens an easy to use interface in a new tab. You can create multiple accounts and you will get all the features that you expect from a ftp client.

From the site: “Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!”

4- IE Tab

Home: http://ietab.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/1419

Use IE tab if you want to check display of your web pages in Internet explorer. Instead of opening IE separately, it will open a tab in firefox which will display your page using the IE engine installed on your machine.  It will put an icon on your status bar using which you can switch engines.

5- Firebug

Home: http://getfirebug.com/

Install: https://addons.mozilla.org/en-US/firefox/addon/1843

How can a firefox addons list be complete without Firebug.

From the site: “Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

Firebug needs no inroduction to web developers. It reduces the development time to a great extent, specially if your application relies on javascript/ajax too much. It provides rock solid debugging for javascript where you can add/remove breakpoints, watch variables in real time and much more.

Want more? You can inspect and edit html/css on the fly to change the look and feel of a page. You can also check the download time for your css files,scripts, images and html pages using the net tab which are helpful for optimizations.

Firbug has a number of addons too (yes! addons for an addon). I recommend both the addons given below.

Page Speed : It is an addon from Google which is used to analyze the loading performance of a page. It tests a page against Web Performance Best Practices which you can read here. After this a score out of 100 is provided. Greater score means faster page load. Install it from this link.

YSlow: YSlow is a addon similar to Page Speed. It is created by Yahoo. YSlow measures a web page’s performance against a set of rules for high performance pages created by Yahoo. You can download it from here and read the performance criteria here.

Bonus:  Colorzilla

Home: http://www.colorzilla.com/firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/271

Need to pick a color from any web page, text or image within browser? Just click colorzilla, which sits at extreme left of your status bar, and point to that location. Now right click on colorzilla and you can copy rgb and hex color codes for that color.

It comes with a built in Color Picker and Palette Browser.

In my previous post I discussed about the security flaws and other shortcomings in IE. Incidentally, the same day a news article appeared on BBC News which reported about a new security vulnerability found in IE7. ( Thanks to Jyotsna for passing this news).

The article describes about a new security hole found in IE7 exploiting which hackers can steal the passwords of users. In my opinion this is not a new news. Many more problems were already there with IE6. It is when users come across such a problem, MS people, in haste, prepare a patch and fix it.

Since this new flaw has been found, 2 million users have been attacked and 10,000 websites has been compromised.

Although Microsoft released a patch for the same on the very next day,17th Dec, it will be a mammoth task to reinstall the trust of users, given the number of safer and better browsers available.

Still thinking IE users? Its time to switch now to safer, faster and better. I said earlier too, there are too many options. Choose whatever suits you.

Personally , I will say : Get Firefox

Read the full article on BBC News

I am tired of making web applications work on IE. I can understand the frustration of this guy who created a pie chart for breakdown of time spent in web development. Making an application work on IE takes most of the time. Be it the issue of setting innerHTML of select or setting innerhtml or rows.

IE is for sure a non standards browser. Major problem is when all other browsers are following w3c standards, IE is still blowing its own trumpet. M*soft must realize now that gone are the days when IE had monopoly in the browser market.
IE has a long list of shortcomings such as little standards Compliance.IE was the only major browser to fail in the acid test in its public release.This test tells that neither IE6 nor IE7 even came close to passing the acid test.Other than that security is also a major concern. According to a study done by The Washington post Internet Explorer was unsafe for 284 Days in 2006 whereas Firefox only 9.
Another issue is regarding CSS and images. IE has issues with CSS selectors and other major problem is png alpha transparency. Transparency allows you to make a pixel in an image partially or completely transparent. No support in IE for that too.
Now some testing with IE. Do you know even a single line of code can crash IE. See the proof here.There are several other methods which you can see here and here

Take a look at IE Death March, Stop IE. No wonder developers now do not want to create application for IE anymore. This article at Digg has received 9899 diggs so far : Digg_this_if_you_re_tired_of_IE

So, what to do? Answer is simple : there many other better browsers available. Choose among them.
Firefox. Hundreds of plug ins and add-ons.
Chrome – Super fast.
Opera
Safari

Personally I do not wish to waste my time creating applications that does not work on IE. What about you? When will you stop using IE?

Stumble this page if you liked it.

If you are a web developer and work with js/AJAX, surely you would have faced a situation like this.
I had a table in a page. What i had to do was create rows in javascript and set the innerhtml of table to the rows created. Something like this-

var tableContents = "";
for(var i=0;i<;5;i++)
{
	tableContents+= "<tr>";
	tableContents+= "<td>";
	tableContents+= "cell content";
	tableContents+= "</td>";
	tableContents+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableContents;

Of course assuming myTable is the table element available in the page.

I prefer innerHTML over DOM functions as they are faster on all browsers and platforms.

Anyway, I checked above code and found that it worked perfectly in all browsers (firefox, opera …) except IE (http://www.schneier.com/blog/archives/2005/12/internet_explor.html).
No error and nothing, my table was still empty.

Well, after many undsuccessfull attempts with innerHTML,I tried google and came up with this.

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
It clearly says-

“The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.”

I dont know why they have done this but thats the way IE is.
So keep in mind the next time you have to do something like this.