Blog Previewer: Changing Content Inside Elements7:13 with Treasure Porth
Use the text() and html() methods to get or change content inside HTML elements.
Providing information and messaging to your user is a hugely important part of 0:00 creating interesting interactive websites. 0:04 jQuery offers a couple of different methods that make it fun and 0:08 easy to create, change, update, and modify text in HTML. 0:11 Let's look at these methods in action by using them to make a blog previewer. 0:16 When we're finished with this project, the user will be able to type a title and 0:20 a blog entry into this form. 0:24 When they click on the preview button, 0:27 what they've typed will display as a preview over here on the right. 0:28 As a first step, I'll show you how to use jQuery to get and 0:32 insert text or HTML onto a webpage. 0:35 For that, we're going to experiment with the jQuery methods, HTML, and text. 0:38 The text method allows you to get, insert, or change text 0:44 within the element you've selected, while the HTML method allows you to get, 0:48 insert, or change HTML within the element you've selected. 0:52 These kinds of methods are known as getters and setters. 0:55 The HRML method without arguments is known as a getter because it gets a value. 0:59 Using the HTML method with no argument would 1:05 get any value that is within the element we call it on. 1:08 The HTML method with arguments is known as a setter because it sets a value. 1:11 So whatever HTML string we pass to the HTML method will be set to 1:17 the element we call it on. 1:21 Let me show you what I mean. 1:23 In my blog previewer project I'm going to open up 1:25 Chrome Dev Tools by inspecting this new blog post, h1. 1:29 Don't worry if you're not super familiar with Dev Tools, we'll just be using it in 1:34 this course to have a look at the values jQuery returns to us. 1:39 If you're interested in knowing more or need a refresher, see the teacher's notes. 1:42 I can see that this h1 has a class of blogPage-title. 1:47 So in the console I'll select this element by its class name, 1:52 then I'll call the text method on it. 1:55 And I'm returned the text that's inside of the element. 2:09 The HTML method works in much the same way. 2:13 I'll select this New Blog Post div, and call the HTML method on it. 2:16 As you can see, this gives me all the HTML that is nested within that element. 2:34 That's how you can get HTML or text from an element. 2:43 But how would you add HTML or text? 2:48 We can also use these methods to set our insert text, 2:50 or HTML, into existing elements. 2:53 Let me show you how. 2:56 Let's close this and open up the workspace if you don't have it open already. 2:58 In the app.js file, let's create a variable called title and 3:02 a variable called content. 3:05 Let's set title to, My First Blog Post. 3:13 And let's put some sample content into the content variable. 3:21 This is my first post. 3:26 In index.html we see that there's an h2 with the id of 3:30 blogTitlePreview and a div with the id of blogContentPreview. 3:35 On our rendered page these elements are over here on the right, 3:41 they're just not visible at the moment because they're empty. 3:45 But we're about to change that. 3:48 Let’s select both of these elements with jQuery and insert some content into them. 3:50 Underneath our sample content variables, select the blogTitlePreview element. 3:58 Note that I’m using a hash here because we are selecting and ID and not a class. 4:08 We can now use the jQuery text method to set the text of this element. 4:14 So I'm selecting this h2 with the id of blogTitlePreview and 4:22 inserting the contents of whatever is in this variable title which is currently, 4:26 My First Blog Post. 4:32 You save, refresh the preview. 4:34 And you'll now see that the text is within this h2. 4:37 Why don't you go ahead and pause the video and 4:42 see if you can do the same thing with the blogContentPreview element. 4:45 Use the text method to set blogContentPreview's text to the value 4:49 of this content variable, then unpause and I'll show you how I did it. 4:54 This was how I did it. 5:00 First I selected the blogContentPreview element. 5:02 Then I set the text to the content variable. 5:09 Let's save and refresh the preview. 5:16 And awesome, that content is appearing on my page. 5:19 Note that we could also pass these strings directly to the text method. 5:23 Like this. 5:28 Then we could comment these variables out. 5:36 And you'll see that this works in much the same way. 5:39 Saving to variables is a bit nicer though because it looks cleaner and because we 5:42 can keep our variables in the same place making them easier to find and change. 5:46 So I'll go ahead and undo that. 5:52 So what happens if we put HTML into the text method? 5:55 Let's see what happens by putting a strong tag around the word, first. 5:58 When we save and refresh the page, 6:13 we can see the strong HTML element is being rendered as plain text. 6:15 That's because jQuery's text method doesn't interpret these tags as HTML. 6:19 To render HTML we'll need to use the HTML method. 6:25 So in app.js change the second method call to html. 6:29 Save, refresh to preview. 6:36 Now the word first is displayed in bold because the strong element is now being 6:40 rendered as an HTML element rather than as a string of plain text. 6:44 So far we've been inserting sample text and 6:50 HTML into the preview section on the site. 6:53 In the next video, we'll start getting into the really fun stuff, 6:56 how jQuery handles perhaps the most vital component of webpage interactivity, 7:00 responding to user input. 7:05 We'll learn about a jQuery method that will help us obtain and 7:07 display information captured from a form. 7:10
You need to sign up for Treehouse in order to download course files.Sign up