Can I use JavaScript and jQuery side by side on the same file or element?
I heard that this is possible: why doesn't the code below work? If I get some element using jQuery(#) and then use innerHTML to change it, it doesn't work. So, for example,
<body>
<script>
$(function(){
var b= $('#p');
b.innerHTML="wow";
});
</script>
<p id="p">hey</p>
</body>
jQuery is a superset of JavaScript. It IS JavaScript! Just a neat tool set for JavaScript so widely used it's almost considered essential to many people.
That being said, jQuery selections are jQuery objects and have some specific properties. They aren't 100% compatible with normal DOM nodes. It's best to stick with one or the other. There are only rare cases where you need to use standard JavaScript anyway because jQuery has so many methods available to you. In this case use:
$(function(){
var b= $('#p');
b.text("wow");
});
If you really want to get the DOM node out of that you'll have to use the array reference which can give you the node, but this means that either you'll only effect the first element such as in this case:
$(function(){
var b= $('#p');
b[0].innerHTML = "wow";
});
or you'll have to loop through and change each element one by one like this:
$(function(){
var b= $('#p');
for(var i = 0; i < b.length(); i++) {
b[i].innerHTML = "wow";
}
});
JQuery is a Javascript framework, so yes you can inherently use them together
var node = document.createElement('input'); //plain old javascript
$(node).click(function(){ alert('you set a click with jQuery') }); //here we are using jQuery
node.getAttribute('name'); //here we are using plain javascript again.
$('#p') will return an array of elements. if you want to check the innerHTML of them you have to iterate though them...or specify the element like this..
b[0].innerHTML = "wow"
Because variable b is a jquery element and its html is set by
b.html("wow");
More documentation on .html().
var x = b.html(); In order to change it you need to use the text method i.e b.text(x+"Adding stuff"); Or as of jquery 1.4 you can pass it in directly x.html("stuff");
b[0].innerHTML="wow";the jquery function returns an array every time even if there is only one element.