jQuery "Object doesn't support this property or method" in Internet Explorer

Question

I am using jQuery to add some dynamic content to a website.

I am attempting to create a new DOM element on-demand using the following code:

container = $('<div id="myContainer"></div>');

This works perfectly in Firefox and Safari, but Internet Explorer is generating an error. The IE error is: Object doesn't support this property or method

I know that jQuery is loading properly, and have tried both the jQuery and $ syntax.

Any ideas as to what might be causing this?

Answer 1

I don't know if it can help but I fixed my problem. Basically IE doesn't want to assign jquery object to an undefined variable.

So what I did is declare this a local variable instead.

Before:

function foo() {
  bar = $('#bar');
}

After:

function foo() {
  var bar = $('#bar');
}

Answer 2

If you want to add a DOM element, the code needs to be modified a bit:

$('body').append('<div id="myContainer"></div>');
// body can be whatever containing element you want to hold myContainer
$('#myContainer').html('whatever you want inside of myContainer');

Answer 3

I had a similar problem. Internet explorer throws this error when you try to modify a global symbol. This is the case not only for reserved words. My example was:

function foo() {
    iframe = $("myDiv").append("<iframe></iframe>");
}

This solves it:

function foo() {
    var iframe = $("myDiv").append("<iframe></iframe>");
}

This, too:

function foo() {
    myIframe = $("myDiv").append("<iframe></iframe>");
}

(but the first is better style anyway)