Why does this only work in Firefox?

Question

I've created a self-contained example to find out why this is only working in Firefox:

var ul = jQuery('<ul></ul>');

jQuery(selector).children().each(function() {
   var li = jQuery('<li></li>');
   var label = '<label for="' + this.id + '">' + this.name + '</label>';
   li.append(label);
   li.append(this);
   ul.append(li);
});

Any webkit browser or even IE fails on this line:

li.append(this);

this is a HTMLInputElement. Any ideas?

Thanks, Pete

Answer 1

The problem is, that "this" is a DOM node already located at some place. You can't move DOM nodes around, that already are located somewhere without first removing or copying them.

If you want to:

• move it, you have to do

  li.append ($(this).remove())

• copy it, you'll do

  li.append ($(this).clone (true))

Actually, I'm quite puzzled, that it should work in FF. If it does, it's an FF bug.

Cheers,

Answer 2

Perhaps this is an issue with the element you are trying to select the children from, or an issue with the version of jQuery you are using.

I am using 1.3.2 and using your code (copy & pasted) I can successfully run this in FF 3, IE 8, and Chrome.