2.1 Get and Set Content

We use JavaScript for a lot of things within our webpages but there are some things that we do almost on a daily basis. For example, we will get and set content within our webpages. Or we will modify the elements themselves and manipulate them. Or we might work with the styles of elements. So in this lesson and the next few lessons, we're going to look at these common tasks that we do. And how the jQuery library can make it easier for us to do them. So we're going to start by getting and setting content with this div element. Now right now it doesn't have any content, so let's go ahead and give it some. We're going to start with a p element and inside of this p element we're going to have the phrase, Hello world. But let's also wrap this inside of a strong element so that it is bolded, and let's also add some emphasis to world. So the phrase hello world is going to be bold, the word world is going to be italicized, and this is going to be our content. So let's work with getting that content and we're going to start by, first of all, retrieving this div element using the jQuery library. We do so with our $ and our CSS selector is going to be the id selector for hello world. And this is going to give us a jQuery object that wraps around this div element. So, let's start with getting the HTML content. Now, that means that we are going to get everything inside of this div element including all of the opening and closing tags that are used here. So the HTML content is this p element, it's the strong element, the text inside of the strong element, the element, and the text there as well. So to get the HTML content of an element we simply call a method called HTML. So, let's create a variable called htmlContent, we're going to set that equal to el.html();. Now you'll notice that I have the screen set up so that on the left hand side we have the code, on the right hand side we have the webpage. So that whenever we save our code, it's going to automatically update the webpage so that we can see everything that happens. Now I need to pull up the developer tools since we're going to write this content to the console. So console.log(htmlcontent); and then we will see that content whenever I save it. There we go, we have everything that is inside of that div element. Now there's another method that allows us to get the content of an element and it's called text. This gives us just the text itself, so it's going to strip out all of the HTML and give us text. So let's call this variable textContent, and the method is simply called text. So let's output this to the console and whenever we save it, all we see is hello world. Now if we add another p element here, and let's just have some other text. Whenever we get the text content and we log that to the console, all we get is the text. So by calling either html or text, we're getting everything that is inside of the element that we are calling that method on. So the html's going to get all of the html, the text method is going to get all of the text. So that's getting content, what about setting it? Well, the same methods are used, except that now we aren't assigning anything to a variable, we are calling these methods and we are passing data to them. So in the case of the html method, we can pass just some text if we want to do that. And that is going to replace all of the HTML content inside of that element. So now we don't have hello world and some other text, we just have this some text. And if we look at the elements, we're going to see that we no longer have our p elements. All we have is that text, some text. Now we can pass HTML here. So, let's wrap this text inside of a p element. Let's save it and even though, as far as the display is concerned, it doesn't look any different, the markup certainly is. We now have a p element and some text there. Now we can do kind of the same thing with the text method but this is for setting the text, it is only for setting the text. So if you pass HTML to the text method, it's going to encode that HTML so that we see the literal HTML in the display. And if we look at the mark up now here's our div element. We still have what looks like HTML but it's not. These angle brackets have been encoded. And that's difficult to tell here in the inspector but that is indeed what is going on here. So we can get and set the html and text content of an element. The other thing that we are going to look at is getting and setting the content of a form field. And we're just going to use a simple text box. So let's have input type text and let's give this an id of text-box. And let's go ahead and set the value to some value. Now, we do need to retrieve this element. So let's go ahead and copy that id so that we can come down to our JavaScript and let's just call this variable textBox. We will once again call the $ function. We'll use the id selector for textBox. And now we are going to get the value of that textBox. So let's say var textBoxValue = we're going to use our textBox object and we're going to call a method, simply called val(). This is going to give us the value of that form field. And if we write this to the console, then we are going to see whatever value we have inside of the text box is going to be inside of the console. Let's comment out this other called console.log just so that we don't get any type of confusing results. So let me save that and we have, well, that is the jQuery object. And it helps if you actually type the right variable here. So instead of console.log text-box we want the textBoxValue and now we see that we have some value here. And just like the html and the text methods, we can use the val method to set the value. So, to do that, we just pass in whatever value that we want that text box to have. So this is new value. And whenever we save this and the browser refreshes, we now see that new value in the text box. So jQuery makes it very easy to get and set content. In order to get content, we call either html, text, or val. And we don't pass anything to those methods, and that will get the content that we want. If we want to set content, we call those same methods, but instead of not passing anything, we pass the data that we want to set to those elements.