How does .text() add the text between the <p></p>?

first we created a Jquery object which in this case is a node and stored that in a variable think of it as a empty container the container being the p tags .("<p> empty</p>")

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

then we define the text we are going to use for our caption this is done by using another variable

 var captionText = $(this).children("img").attr("alt);

so now this variable captionText equals the alt attribute of all the children of $(this) ($this )in our case is the clicked link of the image

so now comes the .text() method, .text() gets the text from a referenced element and returns that value as a string. .text() also is able to set strings as well. in this case we are doing both simultaneously.

 $caption.text(captionText);

So we are using the .text() method to get the text of the variable captionText ( which again equals the alt attribute of all the children of $(this) ($this )in our case is the clicked link of the image ) returning that text as a string and setting that string as content for the Jquery object $caption so we are setting the string inside a container the paragraph tags.

the method .text() cannot replace our <p></p> tags because .text() does not get or set a dom element only a string. which is a datatype So it cannot set or become a container such as our <p></p> it can only be use to get or set a data type which we use to fill our empty container.

Hey Thomas,

.text() is a method known as a content filter meaning it either retrieves or updates the content of elements (, attributes and text nodes).

I had the same doubt. But you guys are great helping out people. Thanks a lot! =]

I also had this question - thanks for the great answers everyone :)