why does this javascript code jump into jQuery code? appendChild conflict?

Question

I will be using some jQuery below this chunk of code (which I may rewrite as jQuery). jQuery is loaded. But I don't understand why, when I step through this code in the debugger, the debugger jumps into jQuery on the line indicated, and I am get the error that "UL.appendChild" is not a function.

 var Dialog = document.createElement('div').id='meta-dialog';
 var Tabs = document.createElement('div').id = 'meta-tabs';         
 var UL = document.createElement('ul').id = 'meta-ul';


 var li1 =document.createElement('li'); li1.id = 'term1-LI';
 var li2 =document.createElement('li'); li2.id = 'term2-LI';

 var li1a = document.createElement('a');
 var li2a = document.createElement('a');

 li1a.href='#meta-tab1'; li1a.innerHTML = 'term1';
 li2a.href='#meta-tab2'; li2a.innerHTML = 'term2';

 li1.appendChild(li1a);
 li2.appendChild(li2a);

 UL.appendChild(li1) ;   // Firebug debugger jumps into jQuery here
 UL.appendChild(li2);

Is the problem apparent to anyone? Is this a conflict with jQuery?

Answer 1

// Here UL will be the id attribute, not the <ul> element.
var UL = document.createElement('ul').id = 'meta-ul';

// this doesn't makes sense... (id.appendChild)
UL.appendChild(li1) ;

// solution:
var UL = document.createElement('ul');
UL.id = 'meta-ul';

And the same goes for Dialog and Tabs. (your li1 and li2 are fine)

Oh, and as long as you're not using anything starting with $, you cannot conflict with jQuery.

Answer 2

>>> var UL = document.createElement('ul').id = 'meta-ul';
>>> UL
"meta-ul"

Answer 3

Your UL is not a jQuery element object, just a native JavaScript element. You will need to obtain the UL with jQuery's $(UL) in order to use jQuery specific methods.