IE innerHTML select bug

As an example for how easy jQuery makes developers life I will present a small problem that exists in IE and that jQuery takes care of.

If you have a ‘select’ and want to modify the innerHtml of that select by using something like this:

  1. document.getElementById('id').innerHTML = '<option>1</option>';

this will not work in IE, so the new content will not be set by just using innerHTML. A fix for this problem can be found, but i just suggest instead of looking for a fix, just use jQuery.

In jQuery this problem doesn’t exist, so by using

  1. $('#id').html('<option>1</option>');

the desired content for the select will be placed and no problem will exist.

Using jQuery .. what is jQuery?

So what is jQuery?..Well jQuery is a open-source Javascript library designed to help developers work with javascript.

The main advantage of using jQuery is easy DOM manipulation, event handling, animating, and easy to use Ajax. Also from experience I can say that one of jQuery’s top advantages is cross-browser compatibility.

So let’s get started…

First thing that you should know about the jQuery class is how to use it. The $ sign is the main alias for the jQuery class. So you can use $(‘form’) or jQuery(‘form’).

If for example you would like to select all input’s from a page then you should write $(‘input’), or if you would like to select a specific div with the id = “new_id” then this is the the select: $(‘#new_id’). So for an id, the # should be used, and for a class the . should be used.

Example (delete all div’s with the class = “new_class”):

  1. $('.new_class').remove();

A thing that you should keep in mind is that every jQuery function returns a jQuery object and this offers the possibility of chaining your jQuery instruction.

Example (change the inner html of a element the make it visible) :

  1. $('#new_id').html('sometext').show();

Read more

Return top