why does this javascript code jump into jQuery code? appendChild conflict?
-
02-10-2019 - |
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?
Solution
// 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.
OTHER TIPS
>>> var UL = document.createElement('ul').id = 'meta-ul';
>>> UL
"meta-ul"
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.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow