JQuery Vs Plain or Raw Javascript

I just wanna show you how JQuery gets the HTML Object and let us compare how it differs from a plain javascript.

The example below is a code snippet from HTML file. And we are gonna use that as the subject.

<div id="name">Ahmad</div>

Here we go, when a plain javascript needs to read the HTML code snippet above . Let say we need to fetch the name and alert or display it. Then in plain javascript we implement the follwing code to do that.

<script>
            var divObject = document.getElementById("name"); // The parameter value "name" is the id of the HTML tag div above
            var name = divObject.childNodes[0].nodeValue;
            alert(name);
</script>

Now, Lets see how JQuery does it.

<script>
            alert($("#name").val()); //JQuery uses "#" pound sign as indication that it is an "id"
</script>

You will see now how they differed? In JQuery it shortens and simplifies plain javascript expression. But, although it is short you have to keep in mind that it is sometimes a problem when you need to import or include its prerequisite files or library about some kilobytes of data. I find it really annoying sometimes. Specially when i use JQuery in multiple pages. Somehow it messed up your HMTL header. But its worth it sometimes.