Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Christopher Lebbano
Christopher Lebbano
15,338 Points
Posted by Christopher Lebbano
Christopher Lebbano
15,338 Points

Specific question about the example given using .text() method in this video.

In this video, we use the .text() method on the jQuery object $caption. The $caption object is declared with a value = $("<p></p>");

In our click event, the function has this line of code:

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

After this is done, I am having a difficult time understanding exactly what string is now being held in the object $caption. Is the .text method completely removing the intial paragraph element held in $caption? Or is it appending the "alt" attribute's string on to the end of the object, making it look something like (<p></p>"alt string here").

It behaves on the web page as if it's like this: (<p> "alt string here" </p>). So how does .text() method shove the alt string into the middle of the paragraph element?

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Christopher,

When passing an argument into the text method it will set the content of the elements in the jQuery object. In this case, it's setting the content of that p element. Whatever the alt attribute was on the image is what will be placed between the opening and closing p tags.

Here's a link to the 2nd variation of the text method that accepts an argument. http://api.jquery.com/text/#text2

Christopher Lebbano
Christopher Lebbano
15,338 Points
Christopher Lebbano
Christopher Lebbano
15,338 Points

Thank you very much, setting the content makes much more sense then setting the entire string.

Serhii Lihus
Serhii Lihus
6,352 Points
Serhii Lihus
Serhii Lihus
6,352 Points

Hi there Christopher!

Answering your question: It just overwrite previous value and put alt text inside of p tag.

Additional info: text() method wont overwrite your html inside of the object. It will only overwrite text value. If you want to store previous value, you need to save it in the variable(for example):

<p>some text</p>

var $p = $('p');
 var oldText = $p.text() // this variable now store text from paragraph
$p.text(oldText + " some new text"); // in this case we've combined old string with new string(or simply concatenate it)
// but if you want to remove text completely from **p** tag. Then you only need to write:
$p.text(""); // it will remove text

On the other hand, there is also html() method which can overwrite your html code inside of the object. Example:

<p>some text</p>

var $p = $('p');
$p.html('<div>changed</div>'); // this string will not only overwrite html but it also change text value.
console.log($p.text());// text changed also

Hope this will explain few thing ;)

Best regards.