JavaScript variable equals jQuery selector creates open and closing tags. Why?

user_2840186 0
Viewed 124

Please be nice. My first question here. I'm learning JavaScript and jQuery. Google isn't much help because I don't know how to ask the right question. Need human intervention please. I'm trying to figure out what is going on with this simple bit of code:

var myVar = $("<p>");

This creates an opening and closing <p> tag and I don't understand why.

Next, I'll add this paragraph to an existing element #myDiv. For example:

$("myDiv").html(myVar); results in the following:

<div id="myDiv"><p></p></div>

Continuing...

$("myDiv").html(myVar.text("A string for the paragraph"));

Results in:

<div id="myDiv"><p>A string for the paragraph</p></div>

Why does that first snippet create an opening and closing <p> tag? What is this called?

html jquery javascript
2 Answers

It's simply a more concise method of this in pure JavaScript:

var myVar = document.createElement("p");

And that goes to jQuery like this:

var myVar = $("<p></p>");

And because it's jQuery, and it gets more and more concise, it eventually becomes:

var myVar = $("<p>");
user_102217650

This is the right kind of question to be asking while you learn, so good for you! That being said, one SO post won’t be able to completely answer it, at least in the way that I think you're asking it, but I (we) will give you what I can.

To begin, the way that JavaScript interacts with HTML is through the Document Object Model (DOM). This is like taking an entire HTML document and cutting it up into the individual elements, tags, attributes, etc., and then constructing a representation of that document in "plain" JavaScript as a (very large) Object. The variable name assigned to this Object is document. This special Object has all sorts of magical properties and methods (functions) that can be used to read and update any piece of the DOM (which ultimately translates into the HTML you see in your browser).

What I've described so far has nothing to do with jQuery, and all of that manipulation can be done with plain JavaScript (like Jack Bashford's answer, for example). However, due to the way that browsers and other web technologies have evolved over the years, many "gotchas" exist (or used to exist) when it comes to doing any of this stuff in "plain" JavaScript. jQuery is an incredibly important tool, historically speaking, because it provided a "standard" way to write very direct code to do all of this DOM reading or manipulation, and the jQuery library would make sure that all of the "gotchas" were avoided.

So, what is jQuery (in code, that is)? Well, there could be many technical answers to that, and one important technical answer is that it is an Object, because in JavaScript, (almost) EVERYTHING is an Object. However, let's focus on the question at hand, and the code you provided:

$("<p>");

Here, the dollar sign IS jQuery (or a variable pointing to the jQuery Object). The parentheses that follow indicate that the jQuery Object is being called as a function. It is like saying, in code, "do the jQuery thing with this string of characters: '<p>'." Taking a step back, the full statement

var myVar = $("<p>");

is saying "this variable 'myVar' is now pointing to the results of whatever doing the jQuery thing with '<p>' will give us."

The "magical" thing about writing in jQuery is that the syntax almost always feels the same (and gives it an intuitive feel).

  1. Grab the jQuery Object. This is usually the variable $, but jQuery will also work.

  2. Call the function ($()). There are cases where you don't, like ajax requests, but that's a separate topic and use case.

  3. Supply it with any kind of selector ($('#myDiv')), which is a way of referring to specific HTML elements based on their properties and location in the document (here we are looking up a specific element based on it's id).

  4. Work with the result ($('#myDiv').html(...etc))

I'll point out at this point that the jQuery documentation should be handy so you know what you're getting as a result of any specific function call, but in almost all cases, this function will return another jQuery Object that holds references to whatever elements you selected or manipulated during that function call.

In the latter example, we will receive a reference to the #myDiv element, on which we then call another function (.html()) that will either read or update the contents of that html element.

In the case of the line you specifically asked about, the syntax used to "select" a 'p' tag will be interpreted by jQuery not to look up all 'p' elements in the document (that syntax would be $("p")), but rather to create a single new 'p' element and store it in memory as a jQuery Object that points to this newly created element. Read more about that syntax and its possibilities here.

Well, I hope that was helpful. I sure enjoyed writing it, and even learned a few things along the way myself.

user_78720630
Related